/**************************************
 *
 * VLOOK CSS 基础库
 *
 * V20.0
 * 2023-09-10
 * powered by MAX°孟兆
 *
 * QQ Group: 805502564
 * email: maxchow@qq.com
 *
 * https://github.com/MadMaxChow/VLOOK
 * https://gitee.com/madmaxchow/VLOOK
 *
 *************************************/

/**************************************
 自定义 UI 元素层叠次序

---------- 云顶 UI 区 ----------

预加载提示 / body.typora-export #write::before / z-index: 7000;

欢迎页 / .v-welcome-page / z-index: 6000;

底部信息栏 / .v-bottom-tips / z-index: 5001;
聚光灯 / .v-spotlight / z-index: 5000;

---------- 高优先信息 UI 区 -----

无效链接清单 / .v-link-error-list / z-index: 4500;
工具栏提示、弹窗提示、字体风格切换 / .v-tool-tips, .v-info-tips, .v-font-theme / z-index: 3000;

---------- 二级 UI 区 ----------

插图导航 / .v-fig-nav / z-index: 2200;
脚注面板 / .v-foot-note-panel / z-index: 2100;
导航中心收起/展开引导把手 / .v-toc-handle / z-index: 2000;
导航中心面板 / .v-nav-center / z-index: 2000;
    导航中心头部 / .v-nav-center-header / z-index: 10;
    导航中心脚部 / .v-nav-center-footer / z-index: 10;

---------- UI 间隔区 ----------

遮罩 / .v-mask / z-index: 1000;
画中画 / .v-pic-in-pic / z-index: 500;

---------- 增强工具操作区 ----------

Mermaid工具提示 / div.mermaidTooltip / z-index: 100;
工具栏 / .v-toolbar / z-index: 100;
状态栏 / .v-status-bar / z-index: 100;
逐章导航面板 / .v-chapter-nav / z-index: 100;
文档更多内容遮挡栏 / .v-more-doc-content-before, .v-more-doc-content-after / z-index: 99;

---------- 文档内容交互区 ----------

在新标签中打开按钮 / .v-btn-open-in-new-tab / z-index: 50;
内容辅助操作栏 / .v-content-assist-bar / z-index: 50;
内容展开操作区 / .v-content-expander / z-index: 10;

---------- 导航中心 ----------

导航中心内文档抽屉入口 .v-doc-lib-board / z-index: 20;
导航中心内的分段控制按钮 .v-segment-indicator / z-index: 10
导航中心内的当前分段选择指示器 .v-segment-indicator / z-index: 0

**************************************/

//-----
// #Color_Scheme
// Light Mode 时图片的非网格背景
@figureSolidBgLight: #FFFFFF;
// Dark Mode 时图片的非网格背景
@figureSolidBgDark: #000000;

// -----
// #Common_LESS_Var
@tableRowNumTop: 2px; // 表格行自动编号的高度
@tableRowCursor: "▶️"; // 表格当前行鼠标 hover 游标
// @tableCellPadding: 8px; // 表格单元格边距
@focusCursor: "✏️"; // 编辑焦点行游标
@focusStyle: @aBorderWidth dashed @aLineColor; // 焦点、焦点行样式
@miniLineHeight: 1;
@defaultLineHeight: 1.5;
@paragraphPadding: .625em; // 段落空白
@paragraphInnerLineHeight: 1.5;
@figurePadding: 20px; // 插图内、间、行空白
@hoverBrightness: 1.2;
@scrollFix: 8px; // 针对 Mermaid 图表，不添加会导致出现滚动条

// 目录、文件 的当前节点、点击节点样式
@tocItemActive_boxShadow: 0 0 0 2px fade(@headerColor, 50%);
@tocItemCurrent_boxShadow: 0 0 0 2px fade(@headerColor, 50%) inset;

// -----
// #Common_CSS_Var
:root {
    // 欢迎页加载模式 ws=auto 时的倒计时秒数
    --v-ws-delay: @welcomeAutoCloseDelay;

    // #VLOOK_Var
    --v-theme-name: @themeName; // 主题名称
    --v-theme-version: "V20.0"; // 主题版本，对应适配 VLOOK.JS 的版本
    --v-color-scheme: light; // 默认颜色模式为：Light 明亮

    // 导航中心、工具栏相关 UI 尺寸
    --v-nav-center-width:340px;
    --v-nav-center-hidden-left:-350px;
    --v-toolbar-btn-width:36px;
    --v-toolbar-btn-space:5px;
    --v-top-margin:8px;

    // 过渡效果设置
    --v-trans-dur: 200ms;
    --v-trans-value: all var(--v-trans-dur) ease-out;

    --tbl-cell-padding: 8px;

    // --------------------
    // 用于 plugin*.txt 中
    --v-btn-bg: @buttonBgColor;
    --v-btn-f: @buttonForeColor;

    // 主题配套的是否启用章节分级自动编号
    --v-chp-auto-num: @ChpAutoNum;

    // 图片的线状网格背景（Light / Dark）
    --v-fig-grid-l-lg: url("");
    --v-fig-grid-l-dk: url("");
    // 图片的块状网格背景（Light / Dark）
    --v-fig-grid-b-lg: url("");
    --v-fig-grid-b-dk: url("");
    // Dark Mode 时反色的图片网格背景
    --v-fig-grid-l-invert: url("");
    --v-fig-grid-b-invert: url("");

    // 光标：复制
    --cur-copy: var(--cur-copy-normal);
    --cur-copy-normal: url(""), auto !important;
    --cur-copy-as-md: url(""), auto !important;

    --v-float-shadow: 0 4px 16px rgba(0, 0, 0, .2); // 按钮类外阴影
    --v-float-inn-shadow: 0 0 0 1px rgba(0, 0, 0, .2) inset; // 按钮类内阴影（边框）

    --v-input-focus-shadow: 0 0 0 3px fade(@aColor, 35%); // 输入/编辑时阴影样式
    --v-input-focus-inn-shadow: 0 0 0 1px @aColor inset; // 输入/编辑时阴影样式
    --v-input-focus-border: @aColor;
}

@import "typora";
@import "mermaid";

html {
    font-size: @fontSize;
}

// VLOOK 未加载完成前的样式
body.typora-export #write::before {
    content: "Preparing VLOOK™ plugin ...\a\a正在准备 VLOOK™ 插件 ...";
    white-space: pre-wrap;
    line-height: 2 !important;
    padding-top: 4em;
    color: fade(@buttonForeColor, 50%);
    background: @buttonBgColor;
    font: italic var(--v-f-w-bd) 2em/10 var(--v-f-fm-bd); // [style] [weight] [size/[line-height]] [family]
    text-align: center;
    overflow: auto;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 7000;

    // 插件加载成功后，会清空该动画属性，相关样式 .v-load-done::before
    // 在 60s 后该动画属性未被清空，则可能插件加载失败，或是没有使用正确的配置导出 HTML
    animation: maybe-failed 500ms ease 60s 1 forwards;
}

@keyframes maybe-failed {
    0% {
    }
    100% {
        content: "Oops~!\a\aThe VLOOK™ plugin load failed, it may be due to network reasons, or the page was not exported in the correct way.\a
        Please try refreshing the page later, or contact the publisher of the page.\a\a
        VLOOK™ 插件加载失败，可能是网络原因，或没有使用正确的方式导出页面。\a
        请稍后再刷新页面，或联系页面的发布者。\a\a
        https://madmaxchow.github.io/VLOOK/index.html";
        font-size: 1.5em;
        color: @buttonForeHoverColor;
        background: @aLineColor;
    }
}

// VLOOK 已完成加载的样式
.v-load-done {
    display: block !important;
}
.v-load-done::before {
    display: none !important;
    font-style: normal;
    animation: none;
}

body {
    background: var(--d-bc) var(--d-bi);
    color: var(--d-f-c);
    font: var(--v-f-w-text) @fontSize/@paragraphInnerLineHeight var(--v-f-fm-text); // [style] [weight] [size/[line-height]] [family]
    caret-color: @aHoverColor;
    -webkit-tap-highlight-color: transparent;
}

body.typora-export {
    padding-left: 0;
    padding-right: 0;
}

body>*:first-child {
    margin-top: 0 !important;
}

body>*:last-child {
    margin-bottom: 0 !important;
}

// 解结，可滚动
body.freeze {
    overflow: hidden;
}
// 冻结，不可滚动
body.unfreeze {
    overflow: auto;
}

// img,
#write p>img:only-child,
// #write p>.md-image:only-child:not(.md-img-error) img:not([src*="grid="]), // 是指 p 内只有 img 的才被视为插图
#write p>.md-image:only-child:not(.md-img-error) img:not([src*="#line"]), // 是指 p 内只有 img 的才被视为插图
#write p>.md-image:only-child:not(.md-img-error) img:not([src*="#block"]), // 是指 p 内只有 img 的才被视为插图
// #write img[src*="mode=figure"],
// #write svg[data-inject-url*="mode=figure"],
// #write .md-image[data-src*="#figure"]>img, // 编辑时
// #write img[src*="#figure"],
// #write svg[data-inject-url*="#figure"],
.v-fig:not([aria-roledescription="zenuml"]),
.md-diagram-panel>.md-diagram-panel-preview>svg, // 编辑时
.md-diagram-panel>svg {
    border-radius: var(--v-r-b);
    padding: 0;
    border: @imgBorderWidth solid var(--pn-c);
}

#write p>.md-image:only-child {
    font-size: 16px;
}

// 图片 URL 参数指定是否填充边缘
// #write img[src*="padding=true"],
// #write svg[data-inject-url*="padding=true"],
#write .md-image[data-src*="#padding"]>img, // 编辑时
#write img[src*="#padding"],
#write svg[data-inject-url*="#padding"] {
    padding: @figurePadding !important;
}
// 图片 URL 参数指定是否使用行内样式（一行多图）
// #write img[src*="inline=true"],
// #write svg[data-inject-url*="inline=true"],
// #write p :is(.md-image+.md-image, img+img, svg+svg, .v-caption+.v-caption),
// 显式指定，一般图片被其他格式嵌套时，如链接内图片等
#write .md-image[data-src*="#inline"]>img, // 编辑时
#write img[src*="#inline"],
#write svg[data-inject-url*="#inline"] {
    margin-right: @figurePadding !important;
    margin-bottom: @figurePadding !important;
}
// 非显式指定时（即普通的连续图片、插图）
#write p :is(.md-image+.md-image, img+img, svg+svg, .v-caption+.v-caption) {
    margin-left: @figurePadding !important;
    margin-bottom: @figurePadding !important;
}

// 图片 URL 参数指定是否使用网格背景
// #write img[src*="grid=line"],
// #write svg[data-inject-url*="grid=line"],
#write .md-image[data-src*="#line"]>img, // 编辑时
#write img[src*="#line"],
#write svg[data-inject-url*="#line"] {
    background: var(--v-fig-grid-l-lg);
}
// #write img[src*="grid=block"],
// #write svg[data-inject-url*="grid=block"],
#write .md-image[data-src*="#block"]>img, // 编辑时
#write img[src*="#block"],
#write svg[data-inject-url*="#block"] {
    background: var(--v-fig-grid-b-lg);
}

// 图片 URL 参数指定进行颜色替换
#write img[d-img-fill="text"],
#write img[d-img-fill="t1"],
#write img[d-img-fill="t2"] {
    left: -12345px;
    border-color: transparent;
    position: relative;
}

// 图片 URL 参数指定图片的显示版式为：icon
// #write img[src*="mode=icon"],
// #write svg[data-inject-url*="mode=icon"],
#write .md-image[data-src*="#icon"]>img, // 编辑时
#write img[src*="#icon"],
#write svg[data-inject-url*="#icon"] {
    display: inline !important;
    height: 1em;
    width: auto;
    margin-top: -4px !important;
    vertical-align: middle;
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
}
// #write svg[data-inject-url*="mode=icon"],
#write svg[data-inject-url*="#icon"] {
    height: 1em;
}
// 图片 URL 参数指定图片的显示版式为：icon2x
// #write img[src*="mode=icon2x"],
// #write svg[data-inject-url*="mode=icon2x"],
#write .md-image[data-src*="#icon2x"]>img, // 编辑时
#write img[src*="#icon2x"],
#write svg[data-inject-url*="#icon2x"] {
    height: 2em;
}

// 图片 URL 参数指定图片的显示版式为：logo
// #write img[src*="mode=logo"],
// #write svg[data-inject-url*="mode=logo"],
#write .md-image[data-src*="#logo"]>img, // 编辑时
#write img[src*="#logo"],
#write svg[data-inject-url*="#logo"] {
    display: inline !important;
    vertical-align: middle;
    background: none !important;
    margin-bottom: @figurePadding !important;
    border: none !important;
    border-radius: 0 !important;
}
// 左对齐
// #write img[src*="mode=logol"],
// #write svg[data-inject-url*="mode=logol"],
#write .md-image[data-src*="#logol"],//>img, // 编辑时
#write img[src*="#logol"],
#write svg[data-inject-url*="#logol"] {
    float: left !important;
    padding: 0 @figurePadding 0 0;
}
// 右对齐
// #write img[src*="mode=logor"],
// #write svg[data-inject-url*="mode=logor"],
#write .md-image[data-src*="#logor"],//>img, // 编辑时
#write img[src*="#logor"],
#write svg[data-inject-url*="#logor"] {
    float: right !important;
    padding: 0 0 0 @figurePadding;
}

// 图片 URL 参数指定图片的显示版式为：card
// #write img[src*="mode=card"],
// #write svg[data-inject-url*="mode=card"],
#write .md-image[data-src*="#card"]>img, // 编辑时
#write img[src*="#card"],
#write svg[data-inject-url*="#card"] {
    display: inline !important;
    vertical-align: middle;
    border: none !important;
    border-bottom: 3px solid @buttonBgColor !important;
    // border: @imgBorderWidth solid var(--pn-c) !important;
    border-radius: var(--v-r-b) var(--v-r-b) 0 0 !important;
    background: none !important;
}
#write blockquote img[src*="#card"],
#write blockquote svg[data-inject-url*="#card"] {
    width: 100%;
    // border: none !important;
}
// cardd Card Dual 模式
#write blockquote img[src*="#cardd"]+.v-post-card,
#write blockquote svg[data-inject-url*="#cardd"]+.v-post-card {
    display: block !important;
    position: initial !important;
    box-shadow: none !important;
    border-radius:  0 0 var(--v-r-b) var(--v-r-b) !important;
}

// 图片 URL 参数指定图片的显示版式为：frame
// #write img[src*="mode=frame"],
// #write svg[data-inject-url*="mode=frame"],
#write .md-image[data-src*="#frame"]>img, // 编辑时
#write img[src*="#frame"],
#write svg[data-inject-url*="#frame"] {
    display: inline !important;
    vertical-align: middle;
    background: none !important;
    margin-bottom: @figurePadding !important;
    border: @imgBorderWidth solid var(--pn-c) !important;
    border-radius: var(--v-r-b) !important;
}
// 左对齐
// #write img[src*="mode=framel"],
// #write svg[data-inject-url*="mode=framel"],
#write .md-image[data-src*="#framel"]>img, // 编辑时
#write img[src*="#framel"],
#write svg[data-inject-url*="#framel"] {
    float: left !important;
    padding: 0 @figurePadding 0 0;
}
// 右对齐
// #write img[src*="mode=framer"],
// #write svg[data-inject-url*="mode=framer"],
#write .md-image[data-src*="#framer"]>img, // 编辑时
#write img[src*="#framer"],
#write svg[data-inject-url*="#framer"] {
    float: right !important;
    padding: 0 0 0 @figurePadding;
}

// 生成通过图片 URL 参数指定图片的缩放样式
.genImgZoom(@zoom) {
    #write .md-image[data-src*="#@{zoom}"]>img, // 编辑时
    #write img[src*="#@{zoom}"],
    #write svg[data-inject-url*="#@{zoom}"] {
        width: @zoom;
    }
}
.genImgZoom(200px);
.genImgZoom(400px);
.genImgZoom(600px);
.genImgZoom(800px);

// 图片默认对齐方式，或 URL 参数指定左对齐
// 须放在各种版式的样式之后，避免 display 属性冲突
// 导出为 HTML 后的插图（不包括版式为 logo / frame 等），由 vlook.js 进行二次调整，详见 __initAlign
// img,
// #write img[src*="mode=figure"],
// #write svg[data-inject-url*="mode=figure"],
// #write img[src*="#figure"],
// #write svg[data-inject-url*="#figure"],
#write p>img:only-child,
#write p>.md-image:only-child:not(.md-img-error)>img, // 是指 p 内只有 img 的才被视为插图
// #write p>img:only-child[src*="align=left"],
// #write p>svg[data-inject-url*="align=left"],
// #write p>.md-image:only-child:not(.md-img-error)>img[src*="align=left"],
// #write p>.md-image:only-child:not(.md-img-error)>svg[data-inject-url*="align=left"],
#write p>.md-image:only-child[data-src*="#left"]:not(.md-img-error)>img, // 编辑时
#write p>img:only-child[src*="#left"],
#write p>svg[data-inject-url*="#left"],
#write p>.md-image:only-child:not(.md-img-error)>img[src*="#left"],
#write p>.md-image:only-child:not(.md-img-error)>svg[data-inject-url*="#left"] {
    display: inline-block !important;
    margin: 0 !important;
}
// 图片 URL 参数指定居中对齐
// #write p>img[src*="align=center"],
// #write p>svg[data-inject-url*="align=center"],
// #write p>.md-image:only-child:not(.md-img-error)>img[src*="align=center"],
// #write p>.md-image:only-child:not(.md-img-error)>svg[data-inject-url*="align=center"],
#write p>.md-image:only-child[data-src*="#center"]:not(.md-img-error)>img, // 编辑时
#write p>img[src*="#center"],
#write p>svg[data-inject-url*="#center"],
#write p>.md-image:only-child:not(.md-img-error)>img[src*="#center"],
#write p>.md-image:only-child:not(.md-img-error)>svg[data-inject-url*="#center"] {
    display: block !important;
    margin: auto !important;
}
// 图片 URL 参数指定右对齐
// #write p>img[src*="align=right"],
// #write p>svg[data-inject-url*="align=right"],
// #write p>.md-image:only-child:not(.md-img-error)>img[src*="align=right"],
// #write p>.md-image:only-child:not(.md-img-error)>svg[data-inject-url*="align=right"],
#write p>.md-image:only-child[data-src*="#right"]:not(.md-img-error)>img, // 编辑时
#write p>img[src*="#right"],
#write p>svg[data-inject-url*="#right"],
#write p>.md-image:only-child:not(.md-img-error)>img[src*="#right"],
#write p>.md-image:only-child:not(.md-img-error)>svg[data-inject-url*="#right"] {
    display: block !important;
    margin: auto !important;
    margin-right: 0 !important;
}

#write audio {
    margin: 0 10px 0 10px;
    border-radius: var(--v-r-s);
}

#write sup.md-footnote {
    color: var(--d-f-c-alt);
    background: none;
    padding: 0;
    margin-left: .2em;
    margin-right: .2em;
}

// #write sup.md-footnote>a,
// #write .v-q sup.md-footnote>a {
#write :is(sup.md-footnote, .v-q sup.md-footnote)>a {
    color: var(--d-bc) !important;
    background: var(--d-f-c-alt);
    margin: 0;
    text-decoration: none;
    box-shadow: none;
    text-shadow: none;
    border-bottom: none;
    padding: 0 5px;
    border-radius: var(--v-r-b);
    font: var(--v-f-w-bd) .8em var(--v-f-fm-bd); // [style] [weight] [size/[line-height]] [family]
}

#write sup.md-footnote>a:hover {
    background: @aLineColor;
    color: @buttonForeColor !important;
}

.footnote-line>a:not(.reversefootnote) {
    color: var(--d-f-c);
    text-decoration: none;
}

#write a,
body.typora-export a {
// :is(#write, body.typora-export) a {
    color: var(--a-color) !important;
    // text-shadow: 0 1px 0 var(--d-bc);
    font-weight: var(--v-f-w-text);
    text-decoration: none;
}

// 指定不使用链接样式
#write a[href*="lnkcss=none"] {
    border-bottom: none;
}
// kbd 中的链接样式
#write kbd a {
    color: var(--d-bc) !important;
    border-bottom: none;
}

// 指定不使用链接样式
#write a[href*="lnkcss=none"]:active,
// kbd 中的链接样式
#write kbd a:active {
    border: none;
}

// 指定不使用链接样式
#write a[href*="lnkcss=none"]:hover,
// kbd 中的链接样式
#write kbd a:hover {
    box-shadow: none;
    border-bottom: none;
}

// 链接中的 kbd 样式
#write a kbd {
    color: @docLibButtonForeColor;
    caret-color: @buttonForeColor;
    font:  var(--v-f-w-bd) .875em/@paragraphInnerLineHeight var(--v-f-fm-key) !important; // [style] [weight] [size/[line-height]] [family]
    background: @docLibButtonBgColor;
    margin: 5px 0;
    border: none;
    border-radius: var(--v-r-b);
    display: inline-block;
    // box-shadow: var(--v-float-shadow), @contrastBorder;
    box-shadow: 0 3px darken(@docLibButtonBgColor, 15%); // 按钮高 3px
    text-shadow: none;
    padding: 5px 10px;
}
// #write a kbd:hover,
// #write .v-q a kbd:hover, // 针对彩虹引用内的情况
// #write .v-q .v-q a kbd:hover { // 针对彩虹引用内的情况
#write :is(a, .v-q a, .v-q .v-q a) kbd:hover { // 针对彩虹引用内的情况
    color: @buttonForeHoverColor;
    background: @aHoverColor;
    box-shadow: 0 3px darken(@aHoverColor, 15%); // 按钮高 3px
}
// 针对彩虹引用内的情况
#write .v-q a kbd {
    color: --d-bc-lg !important;
}
// 链接中的 kbd 样式
#write a kbd:active {
    background: @aActiveColor !important;
    // box-shadow: 0 0 0 2px fade(@aActiveColor, 50%);
    margin-top: 8px; // 5px + 按钮高 3px
    margin-bottom: 2px; // 5px - 按钮高 3px
    box-shadow: none !important;
    transition: none !important;
}

#write blockquote a kbd,
#write details a kbd {
    border-radius: var(--v-r-s);
    padding: 2px 8px;
}

// 标题内链接样式
// #write h1 a,
// #write h2 a,
// #write h3 a,
// #write h4 a,
// #write h5 a,
// #write h6 a {
#write :is(h1,h2,h3,h4,h5,h6) a {
    font-weight: inherit;
}

// #write a:hover,
// body.typora-export a:hover {
:is(#write, body.typora-export) a:hover {
    color: @aHoverColor !important;
    box-shadow: 0 -.3em 0 0 fade(@aLineColor, 30%) inset;
}
// 链接 hover 时，链接内图片样式
// #write a:hover img,
// #write a:hover svg {
#write a:hover :is(img, svg) {
    filter: brightness(@hoverBrightness);
}
// #write a:hover img[src*="darksrc=invert"],
// #write a:hover svg[data-inject-url*="darksrc=invert"] {
#write a:hover :is(
img[src*="darksrc=invert"],
svg[data-inject-url*="darksrc=invert"]) {
    filter: var(--v-invert-dk) brightness(@hoverBrightness);
}

// 链接 hover 时含图片颜色替换的样式
// #write a:hover img[d-img-fill="text"],
// #write a:hover img[d-img-fill="t1"],
// #write a:hover img[d-img-fill="t2"] {
#write a:hover :is(
img[d-img-fill="text"],
img[d-img-fill="t1"],
img[d-img-fill="t2"]) {
    left: -12345px;
    filter: drop-shadow(12345px 0px @aHoverColor) !important;
    position: relative;
}
// 链接 hover 时其内嵌按钮的内嵌 img 图片
// #write a:hover kbd img[d-img-fill="text"],
// #write a:hover kbd img[d-img-fill="t1"],
// #write a:hover kbd img[d-img-fill="t2"] {
#write a:hover kbd :is(
img[d-img-fill="text"],
kbd img[d-img-fill="t1"],
kbd img[d-img-fill="t2"]) {
    filter: drop-shadow(12345px 0px @buttonForeHoverColor) !important;
}
// 链接 hover 时其内嵌按钮的内嵌 svg 图片颜色替换的样式
// #write a:hover kbd svg[d-img-fill] path,
// #write a:hover kbd svg[d-img-fill] rect,
// #write a:hover kbd svg[d-img-fill] ellipse,
// #write a:hover kbd svg[d-img-fill] polygon {
#write a:hover kbd svg[d-img-fill] :is(path, rect, ellipse, polygon) {
    fill: @buttonForeHoverColor !important;
}
// 针对彩虹引用内的情况
// #write .v-q a:hover kbd svg[d-img-fill] path,
// #write .v-q a:hover kbd svg[d-img-fill] rect,
// #write .v-q a:hover kbd svg[d-img-fill] ellipse,
// #write .v-q a:hover kbd svg[d-img-fill] polygon {
#write .v-q a:hover kbd svg[d-img-fill] :is(path, rect, ellipse, polygon) {
    fill: --d-bc-lg !important;
}
// 链接 active 时，链接内图片样式
#write a:active img {
    filter: brightness(.8);
}

// #write a:active,
// body.typora-export a:active {
:is(#write, body.typora-export) a:active {
    color: var(--d-f-c) !important;
    background: var(--pn-c);
    border-bottom: 0;
    border-radius: var(--v-r-s);
    // box-shadow: 0 0 0 2px fade(@aHoverColor, 50%);
    transition: none;
}
// :is(#write, body.typora-export) a:active:has(kbd) {
//     box-shadow: none;
// }

// 默认的超链接样式
// #write a:not([name^="ref-footnote"]):hover {
//     color: @accColorBrown !important;
//     box-shadow: 0 -.3em 0 0 fade(@accColorBrown, 30%) inset !important;
// }
#write a:not([name^="ref-footnote"]):hover::before {
    // content: "Link - " attr(href); // 非页内链接的符号
    content: "…"; // 非页内链接的符号
    white-space: pre;
    margin-top: -1em;
    color: #FFFFFF;
    background: @accColorBrown;
    text-shadow: none;
    border-radius: var(--v-r-tag);
    padding: 2px 3px;
    font: var(--v-f-w-title) 12px/@miniLineHeight var(--v-f-fm-key); // [style] [weight] [size/[line-height]] [family]
    position: absolute;
    display: inline-block;
    z-index: 99999;
    letter-spacing: 0;
}

// 页内链接
#write :is(a[class*="md-toc-inner"], a[href^="#"]):hover::before {
    content: "#";
    background: @accColorGray;
}
#write a[href="#"]:hover::before { // 针对 table.md-grid-board 中的 td>a 标签
    // content: "";
    display: none;
}
// md 文档
#write a[href*=".md"]:hover::before {
    content: "🅼 Markdown file";
    // content: "M⬇ Markdown file";
    color: var(--d-bc);
    background: var(--d-f-c);
}
// VLOOK 文库专用链接
#write :is(a[href^="vlook-doc-lib://"], a[target^="vlook-doc-lib://"]):hover::before {
    content: "❏ VLOOK™ Document Library";
    color: @buttonForeColor;
    background: @buttonBgColor;
}
// HTTPS 协议
#write a[href^="http://"]:hover::before {
    content: "HTTP";
    background: @aLineColor;
}
#write a[href^="https://"]:hover::before {
    content: "Secure Link";
    background: @accColorGreen;
}
// MAILTO 协议
#write a[href^="mailto:"]:hover::before {
    content: "Email";
    background: @accColorBlue;
}
// 文档资源
// #write a[href$=".pdf"]:hover::before,
// #write a[href$=".PDF"]:hover::before,
// #write a[href$=".doc"]:hover::before,
// #write a[href$=".DOC"]:hover::before,
// #write a[href$=".docx"]:hover::before,
// #write a[href$=".DOCX"]:hover::before,
// #write a[href$=".xls"]:hover::before,
// #write a[href$=".XLS"]:hover::before,
// #write a[href$=".xlsx"]:hover::before,
// #write a[href$=".XLSX"]:hover::before,
// #write a[href$=".ppt"]:hover::before,
// #write a[href$=".PPT"]:hover::before,
// #write a[href$=".pptx"]:hover::before,
// #write a[href$=".PPTX"]:hover::before,
// #write a[href$=".txt"]:hover::before,
// #write a[href$=".TXT"]:hover::before,
// #write a[href$=".csv"]:hover::before,
// #write a[href$=".CSV"]:hover::before {
#write :is(a[href$=".pdf"], a[href$=".PDF"],
a[href$=".doc"], a[href$=".DOC"],
a[href$=".docx"], a[href$=".DOCX"],
a[href$=".xls"], a[href$=".XLS"],
a[href$=".xlsx"], a[href$=".XLSX"],
a[href$=".ppt"], a[href$=".PPT"],
a[href$=".pptx"], a[href$=".PPTX"],
a[href$=".txt"], a[href$=".TXT"],
a[href$=".csv"],
a[href$=".CSV"]):hover::before {
    content: "Document";
    background: @accColorCyan;
}
// 归档资源
// #write a[href$=".zip"]:hover::before,
// #write a[href$=".rar"]:hover::before,
// #write a[href$=".7z"]:hover::before,
// #write a[href$=".gz"]:hover::before,
// #write a[href$=".tar"]:hover::before,
// #write a[href$=".dmg"]:hover::before,
// #write a[href$=".cab"]:hover::before {
#write :is(a[href$=".zip"],
a[href$=".rar"],
a[href$=".7z"],
a[href$=".gz"],
a[href$=".tar"],
a[href$=".dmg"],
a[href$=".cab"]):hover::before {
    content: "Archive File";
    background: @accColorOrange;
}
// 可执行文件
#write :is(a[href$=".exe"], a[href$=".sh"]):hover::before {
    content: "!! High Risk !!";
    background: @accColorRed;
}

// 下划线
#write u {
    text-decoration: none;
    border-bottom: 1px solid var(--d-f-c);
}

// #write h1,
// #write h2,
// #write h3,
// #write h4,
// #write h5,
// #write h6 {
#write :is(h1, h2, h3, h4, h5, h6) {
    color: var(--h-f);
    text-align: @headerTextAlign;
    position: relative;
    margin: @h6Margin;
    padding: @headerPadding;
    line-height: @defaultLineHeight;
    font: var(--v-f-w-title) 1em var(--v-f-fm-h); // [style] [weight] [size/[line-height]] [family]
    border-radius: var(--v-r-b);
    background: @headerBackground;
    letter-spacing: @headerLetterSpacing;
}
// 标题渐变色
// #write h1>span,
// #write h2>span,
// #write h3>span,
// #write h4>span,
// #write h5>span {
#write :is(h1, h2, h3, h4, h5)>span {
    background: @lgHeaderBg;
    background-clip: @lgHeaderBgClip;
    -webkit-background-clip: @lgHeaderBgClip;
    color: @lgHeaderColor;
}
// 渐变文本基础样式，另再额外补充 background 样式
.v-grad-base {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

// #write h1+ul,
// #write h1+ol,
// #write h2+ul,
// #write h2+ol,
// #write h3+ul,
// #write h3+ol,
// #write h4+ul,
// #write h4+ol,
// #write h5+ul,
// #write h5+ol,
// #write h6+ul,
// #write h6+ol {
// #write :is(
// h1+ul,
// h1+ol,
// h2+ul,
// h2+ol,
// h3+ul,
// h3+ol,
// h4+ul,
// h4+ol,
// h5+ul,
// h5+ol,
// h6+ul,
// h6+ol) {
//     margin-top: 0;
// }

#write h1 {
    margin: @h1Margin;
    font-size: 2em;
    box-shadow: @h1Shadow;
    -webkit-text-stroke: @h1TextStroke;
    text-stroke: @h1TextStroke;
    text-shadow: @h1TextShadow;
    border-left: @h1BorderLeft;
    border-right: @h1BorderRight;
    border-top: @h1BorderTop;
}

#write h2 {
    margin: @h2Margin;
    font-size: 1.8em;
    box-shadow: @h2Shadow;
    -webkit-text-stroke: @h2TextStroke;
    text-stroke: @h2TextStroke;
    text-shadow: @h2TextShadow;
    border-left: @h2BorderLeft;
    border-right: @h2BorderRight;
    border-top: @h2BorderTop;
}

// h1 后紧跟 h2，或是只有普通正文段落的情况
// h1+p+h2,
#write h1+h2 {
    box-shadow: none;
    background: @multiHeaderBG;
    margin-top: @hContinuous;
    // padding-top: @hContinuous;
    border-top: 0;
}

#write h3 {
    margin: @h3Margin;
    font-size: 1.6em;
    box-shadow: @h3Shadow;
    -webkit-text-stroke: @h3TextStroke;
    text-stroke: @h3TextStroke;
    text-shadow: @h3TextShadow;
    border-left: @h3BorderLeft;
    border-right: @h3BorderRight;
    border-top: @h3BorderTop;
}

// h2 后紧跟 h3，或是只有普通正文段落的情况
// h2+p+h3,
#write h2+h3 {
    box-shadow: none;
    background: @multiHeaderBG;
    margin-top: @hContinuous;
    border-top: 0;
}

#write h4 {
    margin: @h4Margin;
    font-size: 1.4em;
    box-shadow: @h4Shadow;
    -webkit-text-stroke: @h4TextStroke;
    text-stroke: @h4TextStroke;
    text-shadow: @h4TextShadow;
    border-left: @h4BorderLeft;
    border-right: @h4BorderRight;
    border-top: @h4BorderTop;
}

// h3 后紧跟 h4，或是只有普通正文段落的情况
// h3+p+h4,
#write h3+h4 {
    box-shadow: none;
    background: @multiHeaderBG;
    margin-top: @hContinuous;
    border-top: 0;
}

#write h5 {
    font-size: @h5Margin;
    box-shadow: @h5Shadow;
    -webkit-text-stroke: @h5TextStroke;
    text-stroke: @h5TextStroke;
    text-shadow: @h5TextShadow;
    border-left: @h5BorderLeft;
    border-right: @h5BorderRight;
    border-top: @h5BorderTop;
}

// h4 后紧跟 h5，或是只有普通正文段落的情况
// h4+p+h5,
#write h4+h5 {
    box-shadow: none;
    background: @multiHeaderBG;
    margin-top: @hContinuous;
    border-top: 0;
}

#write h6 {
    text-align: left;
    margin-bottom: 0;
    padding-left: 0;
    font: var(--v-f-w-bd) 1.125em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    box-shadow: @h6Shadow;
    -webkit-text-stroke: @h6TextStroke;
    text-stroke: @h6TextStroke;
    text-shadow: @h6TextShadow;
    border-left: @h6BorderLeft;
    border-right: @h6BorderRight;
    border-top: @h6BorderTop;
    background: none;
}
#write>pre.md-meta-block:first-child+h6::after, // 封面，有 YAML 的情况
#write>h6:first-child::after, // 封面，无 YAML 的情况
#write>h1:last-child::after, // 封底
// #write blockquote h6::after,
// #write details h6::after {
#write :is(blockquote, details) h6::after {
    margin-left: 0;
    padding-bottom: 0;
    border: none;
}

// #write h1+h6,
// #write h2+h6,
// #write h3+h6,
// #write h4+h6,
// #write h5+h6,
// #write h6+h6 {
#write :is(
h1+h6,
h2+h6,
h3+h6,
h4+h6,
h5+h6,
h6+h6) {
    margin-top: 0;
    padding-top: 0;
}

#write li>h6 {
    // 用于：子表
    color: var(--h-f);
    border-left: 0;
    padding-left: 0;
}

// body.typora-export strong,
// #write strong {
:is(body.typora-export, #write) strong {
    font: var(--v-f-w-bd) 1em var(--v-f-fm-bd); // [style] [weight] [size/[line-height]] [family]
}

// body.typora-export strong a,
// #write strong a {
:is(body.typora-export, #write) strong a {
    font-weight: var(--v-f-w-bd);
}

#write hr {
    margin-top: 1em;
    margin-bottom: 1em;
    border: 2px solid var(--pn-c);
    overflow: hidden;
    box-sizing: content-box;
    border-top: 0;
}

body>div>h1:first-of-type {
    border-top: 0;
}

body>h2:first-child {
    margin-top: 0;
    padding-top: 0;
}

body>h1:first-child {
    margin-top: 0;
    padding-top: 0;
}

body>h1:first-child+h2 {
    margin-top: 0;
    padding-top: 0;
}

// body>h3:first-child,
// body>h4:first-child,
// body>h5:first-child,
// body>h6:first-child {
body>:is(
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child) {
    margin-top: 0;
    padding-top: 0;
}

// #write a:first-child>h1,
// #write a:first-child>h2,
// #write a:first-child>h3,
// #write a:first-child>h4,
// #write a:first-child>h5,
// #write a:first-child>h6 {
#write a:first-child>:is(h1,h2,h3,h4,h5,h6) {
    margin-top: 0;
    padding-top: 0;
}

// 图文卡片样式
#write .v-post-card {
    left: 0;
    color: @buttonForeColor;
    background: @buttonBgColor;
    // background: linear-gradient(180deg, @buttonBgColor 50%, rgba(@buttonBgColor, .9));
    // font-size: .875em;
    position: absolute;
    display: none;
    overflow: hidden;
    padding: 10px 20px;
    border-radius: var(--v-r-b) var(--v-r-b) 0 0;
    // text-shadow: 0 1px darken(@buttonForeColor, 75%);
    box-shadow: 0 -5px 10px rgba(0, 0, 0, .3);
    // pointer-events: none;
}
#write .v-post-card>.v-card-title {
    font-weight: var(--v-f-w-title);
    font-size: 1.25em;
    padding: 0 0 10px 0;
}
#write .v-post-card>.v-card-text p {
    margin-top: 0;
}

// 配合段落导航使用
// #write ul>li,
// #write ol>li,
// #write p,
// #write figure,
// #write .md-diagram-panel {
#write :is(figure, .md-diagram-panel) {
    text-align: left;
    margin-top: 0;
}

#write figure {
    padding-bottom: 1px;
    margin-top: @paragraphPadding;// margin-bottom: @paragraphPadding;
    margin-bottom: @scrollFix; // 针对以下的 .md-diagram-panel 修正
    border-radius: @tableBorderRadius;
}
.md-diagram-panel {
    padding-bottom: @scrollFix; // 针对 Mermaid 图表，不添加会导致出现滚动条
}

// 有序、无序列表符号样式
#write ::marker,
#write li::before {
// #write :is(::marker, li::before) {
    font-family: var(--v-f-fm-num);
    color: var(--h-f);
    margin-left: 5px;
}

// #write ul,
// #write ol {
#write :is(ul,ol) {
    padding-left: 1.25em;
    padding-bottom: 0;
}
// 除图片插图外的段落样式
#write>p {//:not([class*=v-cap-cntr]) {
    margin-top: @paragraphPadding;// margin-bottom: @paragraphPadding;
}


// ----------------------------------------
// 段落间距样式
#write p,
#write li {
    margin-top: @paragraphPadding;// margin-bottom: @paragraphPadding;//.25em;
    margin-bottom: 0;
    word-break: normal;
    word-wrap: break-word;
}
content>#write p:has(.md-image) { // Typora 编辑时的图片段落
    margin-top: 0;
}

// #write blockquote>p:first-of-type,
// #write ol>li:first-of-type,
// #write ul>li:first-of-type {
// #write blockquote>p:first-of-type,
// #write blockquote>ol:first-of-type>li:first-of-type,
// #write blockquote>ul:first-of-type>li:first-of-type,
// #write blockquote>ol:first-of-type>li:first-of-type>p,
// #write blockquote>ul:first-of-type>li:first-of-type>p,
// #write details>p:first-of-type,
// #write details>ol:first-of-type>li:first-of-type,
// #write details>ul:first-of-type>li:first-of-type,
// #write details>ol:first-of-type>li:first-of-type>p,
// #write details>ul:first-of-type>li:first-of-type>p {
#write :is(blockquote, details)>p:first-of-type,
#write :is(blockquote, details)>ol:first-of-type>li:first-of-type,
#write :is(blockquote, details)>ul:first-of-type>li:first-of-type,
#write :is(blockquote, details)>ol:first-of-type>li:first-of-type>p,
#write :is(blockquote, details)>ul:first-of-type>li:first-of-type>p {
    margin-top: 0;
}

// 有序列表
#write ol>li { // 1 级
    list-style-type: decimal;
}
#write ol>li>ol>li { // 2 级
    list-style-type: lower-alpha;
}
#write ol>li>ol>li>ol>li { // 3 级
    list-style-type: lower-roman;
}
#write ol>li>ol>li>ol>li>ol>li { // 4 级
    list-style-type: decimal-leading-zero;
}
#write ol>li>ol>li>ol>li>ol>li>ol>li { // 5 级
    list-style-type: upper-alpha;
}
#write ol>li>ol>li>ol>li>ol>li>ol>li>ol>li { // 6 级
    list-style-type: upper-roman;
}

// 无序列表
#write ul>li { // 1 级
    list-style-type: disc;
}
#write ul>li>ul>li { // 2 级
    list-style-type: square;
}
#write ul>li>ul>li>ul>li { // 3 级
    list-style-type: circle;
}
#write ul>li>ul>li>ul>li>ul>li { // 4 级
    list-style-type: disc;
}
#write ul>li>ul>li>ul>li>ul>li>ul>li { // 5 级
    list-style-type: square;
}
#write ul>li>ul>li>ul>li>ul>li>ul>li>ul>li { // 6 级
    list-style-type: circle;
}

// #write ol>li>ol>li::before,
// #write ul>li>ul>li::before {
#write :is(ol>li>ol>li, ul>li>ul>li)::before {
    color: var(--ac-t2-lg) !important;
}

// #write blockquote[d-quote-group]+figcaption,
// #write details[d-quote-group]+figcaption {
#write :is(blockquote, details)[d-quote-group]+figcaption {
    margin-top: 1em;
}

// #write blockquote,
// #write details,
#write :is(blockquote, details),
body:not([class]) blockquote { // 用于在 Typora 中的进行主题预览
    color: var(--d-f-c);
    background: var(--ac-t1-fade);
    border-radius: var(--v-r-b);
    padding: .75em 1em;
    margin-top: @paragraphPadding;// margin-bottom: @paragraphPadding;
}
// #write>blockquote,
// #write>details {
#write>:is(blockquote, details) {
    margin-top: @paragraphPadding;
}

// 详情展开后的标题
details[open]>summary {
    border-bottom: 1px solid var(--d-bc);
    padding-bottom: .3125em;
    margin-bottom: .3125em;
}
// 连续 details 时对 summary 的处理
// :is(blockquote, details)>details[open]+details[open]>summary {
//     border-top: 3px solid var(--d-bc);
//     padding-top: .3125em;
// }

summary {
    // padding-top: .3125em;
    // padding-bottom: .3125em;
    // font-size: 1.125em;
    // font-weight: var(--v-f-w-title);
    font: var(--v-f-w-title) 1.125em var(--v-f-fm-title);
    cursor: pointer;
}
summary:hover {
    color: var(--d-f-c) !important;
}
summary:hover::before {
    color: var(--d-bc) !important;
    background-color: var(--d-f-c) !important;
}

// 隐藏 details 默认的三角符号
summary::marker {
    display: none;
    font-size: 0;
}
summary::-webkit-details-marker {
    display: none;
}
summary::-moz-list-bullet {
    font-size: 0;
}
// 导出 HTML 后的 summary 折叠样式
summary::before,
// 编辑时的 summary 折叠样式
#write blockquote>blockquote:first-child>h6::before {
    content: "+";
    position: relative;
    display: inline-block;
    color: var(--d-bc-lg);
    background-color: var(--ac-t1-lg);
    text-align: center;
    border-radius: 50%;
    width: 1em;
    height: 1em;
    line-height: 1;
    margin-right: 5px;
}
details[open]>summary::before {
    content: "×";
    opacity: .5;
    background: none !important;
    color: var(--d-f-c) !important;
    // box-shadow: 0 0 0 1px inset var(--pn-c);
}

// // 紧跟图片、表格后的引用样式微调
// #write .md-table-fig+blockquote,
// #write .md-fences+blockquote,
// // 紧跟带自动题注的内容（插图、代码块、表格、音频、视频）后的引用样式微调
// #write .v-cap-cntr+blockquote,
// #write .v-cap-cntr+.v-content-expander+blockquote {
// 紧跟图片、表格后的引用样式微调
#write :is(.md-table-fig, .md-fences)+:is(blockquote, details),
// 紧跟带自动题注的内容（插图、代码块、表格、音频、视频）后的引用样式微调
#write :is(.v-cap-cntr, .v-cap-cntr+.v-content-expander)+:is(blockquote, details) {
    width: fit-content;
    max-width: 100%;
    background: var(--pn-c) !important;
    border-top-left-radius: 0;
    margin-top: 0;
}

// --------------------
// 引用后的紧跟独立的上标内容
// #write .md-hr+p:has(sup) {
//     margin-top: -1em;
//     text-align: center;
// }
// #write .md-hr+p sup:only-child {
//     font-size: 1em;
//     color: var(--d-f-c-alt);
//     border: 2px solid var(--d-f-c);
//     background-color: var(--d-bc);
// }

// --------------------
// 引用分栏

// 引用分栏提示样式
content>#write .md-hr+blockquote::before {
    background-color: var(--pn-c-alt);
    color: var(--d-f-c);
    font-weight: bold;
    font-style: italic;
    font-size: .75em;
    text-align: center;
    white-space: pre;
    padding: 0 .75em;
    margin-left: -1.3em;
    position: absolute;
    width: auto;
    left: 3em;
    right: 20px;
    opacity: .5;
    pointer-events: none;
}
content>#write .md-hr+blockquote::before {
    content: "⬛︎ ⬛︎  2 Columns of Quote / 双栏引用  ⬛︎ ⬛︎";
    margin-top: -3.3em;
}
content>#write .md-hr+.md-hr+blockquote::before {
    content: "⬛︎ ⬛︎ ⬛︎  3 Columns of Quote / 三栏引用  ⬛︎ ⬛︎ ⬛︎";
    margin-top: -4.8em;
    padding-top: .75em;
    padding-bottom: .75em;
}
content>#write .md-hr+.md-hr+.md-hr+blockquote::before {
    content: "⬛︎ ⬛︎ ⬛︎ ⬛︎  4 Columns of Quote / 四栏引用  ⬛︎ ⬛︎ ⬛︎ ⬛︎";
    margin-top: -6.3em;
    padding-top: 1.4em;
    padding-bottom: 1.4em;
}

// -----
// 以双栏方式显示，49*2+2*1=100
#write :is(hr, .md-hr)+blockquote,
#write :is(hr, .md-hr)+blockquote+blockquote,
#write :is(hr, .md-hr)+details,
#write :is(hr, .md-hr)+details+details {
    color: var(--d-f-c);
    display: inline-block !important;
    max-width: 49% !important;
    min-width: 49% !important;
    vertical-align: top;
}
// 双栏内容之间的样式
#write :is(hr, .md-hr)+blockquote+blockquote,
#write :is(hr, .md-hr)+details+details {
    margin-left: 2% !important;
}

// -----
// 以三栏方式显示，32*3+2*2=100
#write :is(hr+hr, .md-hr+.md-hr)+blockquote,
#write :is(hr+hr, .md-hr+.md-hr)+blockquote+blockquote,
#write :is(hr+hr, .md-hr+.md-hr)+blockquote+blockquote+blockquote,
#write :is(hr+hr, .md-hr+.md-hr)+details,
#write :is(hr+hr, .md-hr+.md-hr)+details+details,
#write :is(hr+hr, .md-hr+.md-hr)+details+details+details {
    color: var(--d-f-c);
    display: inline-block !important;
    max-width: 32% !important;
    min-width: 32% !important;
    vertical-align: top;
}
// 三栏内容之间的样式
#write :is(hr+hr, .md-hr+.md-hr)+blockquote+blockquote,
#write :is(hr+hr, .md-hr+.md-hr)+blockquote+blockquote+blockquote,
#write :is(hr+hr, .md-hr+.md-hr)+details+details,
#write :is(hr+hr, .md-hr+.md-hr)+details+details+details {
    margin-left: 2% !important;
}

// -----
// 以四栏方式显示，23.5*4+2*3=100
#write :is(hr+hr+hr, .md-hr+.md-hr+.md-hr)+blockquote,
#write :is(hr+hr+hr, .md-hr+.md-hr+.md-hr)+blockquote+blockquote,
#write :is(hr+hr+hr, .md-hr+.md-hr+.md-hr)+blockquote+blockquote+blockquote,
#write :is(hr+hr+hr, .md-hr+.md-hr+.md-hr)+blockquote+blockquote+blockquote+blockquote,
#write :is(hr+hr+hr, .md-hr+.md-hr+.md-hr)+details,
#write :is(hr+hr+hr, .md-hr+.md-hr+.md-hr)+details+details,
#write :is(hr+hr+hr, .md-hr+.md-hr+.md-hr)+details+details+details,
#write :is(hr+hr+hr, .md-hr+.md-hr+.md-hr)+details+details+details+details {
    color: var(--d-f-c);
    display: inline-block !important;
    max-width: 23.5% !important;
    min-width: 23.5% !important;
    vertical-align: top;
}
// 四栏内容之间的样式
#write :is(hr+hr+hr, .md-hr+.md-hr+.md-hr)+blockquote+blockquote,
#write :is(hr+hr+hr, .md-hr+.md-hr+.md-hr)+blockquote+blockquote+blockquote,
#write :is(hr+hr+hr, .md-hr+.md-hr+.md-hr)+blockquote+blockquote+blockquote+blockquote,
#write :is(hr+hr+hr, .md-hr+.md-hr+.md-hr)+details+details,
#write :is(hr+hr+hr, .md-hr+.md-hr+.md-hr)+details+details+details,
#write :is(hr+hr+hr, .md-hr+.md-hr+.md-hr)+details+details+details+details {
    margin-left: 2% !important;
}

// 引用内的双栏、三栏、四栏
#write blockquote>:is(hr, .md-hr)+blockquote,
#write blockquote>:is(hr, .md-hr)+blockquote+blockquote,
#write blockquote>:is(hr, .md-hr)+blockquote+blockquote+blockquote,
#write blockquote>:is(hr, .md-hr)+blockquote+blockquote+blockquote+blockquote {
    background: var(--d-bc);
    padding: .75em 1em;
    border-width: 0;
}


#write blockquote hr,
#write details hr {
    border-color: var(--d-f-c);
    opacity: .2;
}

#write blockquote h6 {
    padding: 0;
    // padding: 5px 0;
    margin-top: 0;
    color: var(--d-f-c);
    font-size: 1.125em;
}

#write blockquote h6 a {
    margin-left: -.1em;
}

#write blockquote h6::before {
    content: "" !important;
    margin-left: 0 !important;
}

// #write blockquote>ul,
// #write blockquote>ol {
// #write blockquote>:is(ul,ol),
// #write details>:is(ul,ol) {
//     margin-top: 0;
//     margin-bottom: 0;
// }

// #write blockquote .CodeMirror-linenumber,
// #write details .CodeMirror-linenumber {
#write :is(blockquote, details) .CodeMirror-linenumber {
    color: var(--h-f);
}

// 代码块内代码区域
#write pre.ty-contain-cm .CodeMirror-lines {
    background: var(--c-blk-bg);
    background-size: @codeBlockBackgroundSize;
    background-repeat: @codeBlockBackgroundRepeat;
    background-position: @codeBlockBackgroundPosition;
}

// --------------------
// 列表分栏
// 列表分栏内容微调
#write :is(hr, .md-hr)+ul,
#write :is(hr, .md-hr)+ol {
    padding-left: 0 !important;
}
#write :is(hr, .md-hr)+ul>li,
#write :is(hr, .md-hr)+ol>li {
    // border: 2px solid var(--pn-c);
    box-shadow: 0 0 0 2px var(--std-code-shadow) inset;
    border-radius: var(--v-r-b);
    margin-top: 0 !important;
    margin-bottom: 1em;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
}
#write :is(hr, .md-hr)+ul>li:hover,
#write :is(hr, .md-hr)+ol>li:hover {
    // border-color: @buttonBgColor;
    box-shadow: 0 0 0 2px @buttonBgColor inset;
}
#write :is(hr, .md-hr)+ul>li>p:first-of-type,
#write :is(hr, .md-hr)+ol>li>p:first-of-type {
    font: var(--v-f-w-bd) 1em var(--v-f-fm-bd);
    color: @buttonForeColor;
    background: @buttonBgColor;
    padding: 5px;
    border-radius: var(--v-r-t) var(--v-r-t) 0 0;
    text-align: center;
    margin-top: 0;
    margin-left: -10px;
    margin-right: -10px;
}
// #write :is(hr, .md-hr)+ul>li>p:first-of-type::before,
// #write :is(hr, .md-hr)+ol>li>p:first-of-type::before {
//     content: "☰ ";
//     opacity: .5;
// }
// 列表分栏提示样式
content>#write .md-hr+ul::before,
content>#write .md-hr+ol::before {
    background-color: var(--pn-c-alt);
    color: var(--d-f-c);
    font-weight: bold;
    font-style: italic;
    font-size: .75em;
    text-align: center;
    white-space: pre;
    padding: 0 10px;
    margin-left: 0;
    position: absolute;
    width: auto;
    left: 0;
    right: 0;
    opacity: .5;
    pointer-events: none;
}
// content>#write .md-hr+ul::before,
// content>#write .md-hr+ol::before {
content>#write .md-hr+:is(ul, ol)::before {
    content: "⬛︎ ⬛︎  2 Columns of List / 双栏列表  ⬛︎ ⬛︎";
    margin-top: -2.9em;
}
// content>#write .md-hr+.md-hr+ul::before,
// content>#write .md-hr+.md-hr+ol::before {
content>#write .md-hr+.md-hr+:is(ul, ol)::before {
    content: "⬛︎ ⬛︎ ⬛︎  3 Columns of List / 三栏列表  ⬛︎ ⬛︎ ⬛︎";
    margin-top: -3em;
    padding-top: 0;
    padding-bottom: .2em;
}
// content>#write .md-hr+.md-hr+.md-hr+ul::before,
// content>#write .md-hr+.md-hr+.md-hr+ol::before {
content>#write .md-hr+.md-hr+.md-hr+:is(ul, ol)::before {
    content: "⬛︎ ⬛︎ ⬛︎ ⬛︎  4 Columns of List / 四栏列表  ⬛︎ ⬛︎ ⬛︎ ⬛︎ ";
    margin-top: -4.5em;
    padding-top: .9em;
    padding-bottom: .7em;
}
// content>#write .md-hr+.md-hr+.md-hr+.md-hr+ul::before,
// content>#write .md-hr+.md-hr+.md-hr+ol::before {
content>#write .md-hr+.md-hr+.md-hr+.md-hr+:is(ul, ol)::before {
    content: "⬛︎ ⬛︎ ⬛︎ ⬛︎ ⬛︎  5 Columns of List / 五栏列表  ⬛︎ ⬛︎ ⬛︎ ⬛︎ ⬛︎";
    margin-top: -5.9em;
    padding-top: 1.6em;
    padding-bottom: 1.4em;
}

// -----
// 以双栏方式显示列表，49*2+0.5*2*2=100
#write :is(hr, .md-hr)+ul>li,
#write :is(hr, .md-hr)+ul>li+li,
#write :is(hr, .md-hr)+ol>li,
#write :is(hr, .md-hr)+ol>li+li {
    display: inline-block;
    // list-style-type: none;
    vertical-align: top;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 49% !important;
    min-width: 49% !important;
}
// 双栏列表内容之间的样式
#write :is(hr, .md-hr)+ul>li+li,
#write :is(hr, .md-hr)+ol>li+li {
    margin-left: 2% !important;
}
// 每两个分栏首个列表微调
#write :is(hr, .md-hr)+ul>li:nth-of-type(2n+1),
#write :is(hr, .md-hr)+ol>li:nth-of-type(2n+1) {
    margin-left: 0 !important;
}
// 双栏的有序列表微调
#write :is(hr, .md-hr)+ul ol>li,
#write :is(hr, .md-hr)+ol ol>li {
    margin-left: .5em !important;
}

// -----
// 以三栏方式显示列表，32*3+2*2=100
#write :is(hr+hr, .md-hr+.md-hr)+ul>li,
#write :is(hr+hr, .md-hr+.md-hr)+ul>li+li,
#write :is(hr+hr, .md-hr+.md-hr)+ul>li+li+li,
#write :is(hr+hr, .md-hr+.md-hr)+ol>li,
#write :is(hr+hr, .md-hr+.md-hr)+ol>li+li,
#write :is(hr+hr, .md-hr+.md-hr)+ol>li+li+li {
    display: inline-block;
    // list-style-type: none;
    vertical-align: top;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 32% !important;
    min-width: 32% !important;
}
// 三栏列表内容之间的样式
#write :is(hr+hr, .md-hr+.md-hr)+ul>li+li,
#write :is(hr+hr, .md-hr+.md-hr)+ul>li+li+li,
#write :is(hr+hr, .md-hr+.md-hr)+ol>li+li,
#write :is(hr+hr, .md-hr+.md-hr)+ol>li+li+li {
    margin-left: 2% !important;
}
// 每三个分栏首个列表微调
#write :is(hr+hr, .md-hr+.md-hr)+ul>li+li:nth-of-type(3n+1),
#write :is(hr+hr, .md-hr+.md-hr)+ul>li+li+li:nth-of-type(3n+1),
#write :is(hr+hr, .md-hr+.md-hr)+ol>li+li:nth-of-type(3n+1),
#write :is(hr+hr, .md-hr+.md-hr)+ol>li+li+li:nth-of-type(3n+1) {
    margin-left: 0 !important;
}
// 三栏的有序列表微调
#write :is(hr+hr, .md-hr+.md-hr)+ul ol>li,
#write :is(hr+hr, .md-hr+.md-hr)+ol ol>li {
    margin-left: .5em !important;
}

// -----
// 以四栏方式显示列表，23.5*4+2*3=100
#write :is(hr+hr+hr, .md-hr+.md-hr+.md-hr)+ul>li,
#write :is(hr+hr+hr, .md-hr+.md-hr+.md-hr)+ul>li+li,
#write :is(hr+hr+hr, .md-hr+.md-hr+.md-hr)+ul>li+li+li,
#write :is(hr+hr+hr, .md-hr+.md-hr+.md-hr)+ul>li+li+li+li,
#write :is(hr+hr+hr, .md-hr+.md-hr+.md-hr)+ol>li,
#write :is(hr+hr+hr, .md-hr+.md-hr+.md-hr)+ol>li+li,
#write :is(hr+hr+hr, .md-hr+.md-hr+.md-hr)+ol>li+li+li,
#write :is(hr+hr+hr, .md-hr+.md-hr+.md-hr)+ol>li+li+li+li {
    display: inline-block;
    // list-style-type: none;
    vertical-align: top;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 23.5% !important;
    min-width: 23.5% !important;
}
// 四栏列表内容之间的样式
#write :is(hr+hr+hr, .md-hr+.md-hr+.md-hr)+ul>li+li,
#write :is(hr+hr+hr, .md-hr+.md-hr+.md-hr)+ul>li+li+li,
#write :is(hr+hr+hr, .md-hr+.md-hr+.md-hr)+ul>li+li+li+li,
#write :is(hr+hr+hr, .md-hr+.md-hr+.md-hr)+ol>li+li,
#write :is(hr+hr+hr, .md-hr+.md-hr+.md-hr)+ol>li+li+li,
#write :is(hr+hr+hr, .md-hr+.md-hr+.md-hr)+ol>li+li+li+li {
    margin-left: 2% !important;
}
// 每四个分栏首个列表微调
#write :is(hr+hr+hr, .md-hr+.md-hr+.md-hr)+ul>li+li:nth-of-type(4n+1),
#write :is(hr+hr+hr, .md-hr+.md-hr+.md-hr)+ul>li+li+li:nth-of-type(4n+1),
#write :is(hr+hr+hr, .md-hr+.md-hr+.md-hr)+ul>li+li+li+li:nth-of-type(4n+1),
#write :is(hr+hr+hr, .md-hr+.md-hr+.md-hr)+ol>li+li:nth-of-type(4n+1),
#write :is(hr+hr+hr, .md-hr+.md-hr+.md-hr)+ol>li+li+li:nth-of-type(4n+1),
#write :is(hr+hr+hr, .md-hr+.md-hr+.md-hr)+ol>li+li+li+li:nth-of-type(4n+1) {
    margin-left: 0 !important;
}
// 四栏的有序列表微调
#write :is(hr+hr+hr, .md-hr+.md-hr+.md-hr)+ul ol>li,
#write :is(hr+hr+hr, .md-hr+.md-hr+.md-hr)+ol ol>li {
    margin-left: .5em !important;
}

// -----
// 以五栏方式显示列表，19.2*5+1*4=100
#write :is(hr+hr+hr+hr, .md-hr+.md-hr+.md-hr+.md-hr)+ul>li,
#write :is(hr+hr+hr+hr, .md-hr+.md-hr+.md-hr+.md-hr)+ul>li+li,
#write :is(hr+hr+hr+hr, .md-hr+.md-hr+.md-hr+.md-hr)+ul>li+li+li,
#write :is(hr+hr+hr+hr, .md-hr+.md-hr+.md-hr+.md-hr)+ul>li+li+li+li,
#write :is(hr+hr+hr+hr, .md-hr+.md-hr+.md-hr+.md-hr)+ul>li+li+li+li+li,
#write :is(hr+hr+hr+hr, .md-hr+.md-hr+.md-hr+.md-hr)+ol>li,
#write :is(hr+hr+hr+hr, .md-hr+.md-hr+.md-hr+.md-hr)+ol>li+li,
#write :is(hr+hr+hr+hr, .md-hr+.md-hr+.md-hr+.md-hr)+ol>li+li+li,
#write :is(hr+hr+hr+hr, .md-hr+.md-hr+.md-hr+.md-hr)+ol>li+li+li+li,
#write :is(hr+hr+hr+hr, .md-hr+.md-hr+.md-hr+.md-hr)+ol>li+li+li+li+li {
    display: inline-block;
    // list-style-type: none;
    vertical-align: top;
    max-width: 19.2% !important;
    min-width: 19.2% !important;
}
// 五栏列表内容之间的样式
#write :is(hr+hr+hr+hr, .md-hr+.md-hr+.md-hr+.md-hr)+ul>li+li,
#write :is(hr+hr+hr+hr, .md-hr+.md-hr+.md-hr+.md-hr)+ul>li+li+li,
#write :is(hr+hr+hr+hr, .md-hr+.md-hr+.md-hr+.md-hr)+ul>li+li+li+li,
#write :is(hr+hr+hr+hr, .md-hr+.md-hr+.md-hr+.md-hr)+ol>li+li,
#write :is(hr+hr+hr+hr, .md-hr+.md-hr+.md-hr+.md-hr)+ol>li+li+li,
#write :is(hr+hr+hr+hr, .md-hr+.md-hr+.md-hr+.md-hr)+ol>li+li+li+li {
    margin-left: 1% !important;
}
// 每五个分栏首个列表微调
#write :is(hr+hr+hr+hr, .md-hr+.md-hr+.md-hr+.md-hr)+ul>li+li:nth-of-type(5n+1),
#write :is(hr+hr+hr+hr, .md-hr+.md-hr+.md-hr+.md-hr)+ul>li+li+li:nth-of-type(5n+1),
#write :is(hr+hr+hr+hr, .md-hr+.md-hr+.md-hr+.md-hr)+ul>li+li+li+li:nth-of-type(5n+1),
#write :is(hr+hr+hr+hr, .md-hr+.md-hr+.md-hr+.md-hr)+ul>li+li+li+li+li:nth-of-type(5n+1),
#write :is(hr+hr+hr+hr, .md-hr+.md-hr+.md-hr+.md-hr)+ol>li+li:nth-of-type(5n+1),
#write :is(hr+hr+hr+hr, .md-hr+.md-hr+.md-hr+.md-hr)+ol>li+li+li:nth-of-type(5n+1),
#write :is(hr+hr+hr+hr, .md-hr+.md-hr+.md-hr+.md-hr)+ol>li+li+li+li:nth-of-type(5n+1),
#write :is(hr+hr+hr+hr, .md-hr+.md-hr+.md-hr+.md-hr)+ol>li+li+li+li+li:nth-of-type(5n+1) {
    margin-left: 0 !important;
}
// 五栏的有序列表微调
#write :is(hr+hr+hr+hr, .md-hr+.md-hr+.md-hr+.md-hr)+ul ol>li,
#write :is(hr+hr+hr+hr, .md-hr+.md-hr+.md-hr+.md-hr)+ol ol>li {
    margin-left: .5em !important;
}

// 引用内的引用（非分栏）
// #write blockquote>blockquote,
// #write li>blockquote {
#write :is(blockquote, li)>blockquote,
// 详情内的引用（非分栏）
#write :is(blockquote, details)>details {
    border-left: 6px solid fade(@accColorGray, 20%);
    background: none;
    border-radius: 0;
    padding: 0 .5em;
}
// 引用内的最后一个引用
// #write blockquote>blockquote:last-child,
#write :is(blockquote, details)>:is(blockquote, details):last-child,
// #write blockquote>:is(ol,ul):last-child,
// #write details>:is(ol,ul):last-child {
#write :is(blockquote, details)>:is(ol,ul):last-child {
    margin-bottom: 0;
}

// 引用的引用（分栏）
#write :is(li>hr, li>.md-hr)+
:is(blockquote, blockquote+blockquote, blockquote+blockquote+blockquote, blockquote+blockquote+blockquote+blockquote),
#write :is(li>hr, li>.md-hr)+
:is(details, details+details, details+details+details, details+details+details+details) {
    border: none;
    background: var(--blockquote-bg);
    border-radius: var(--v-r-s);
    padding: .75em 1em;
}

// #write blockquote>strong,
// #write details>strong {
#write :is(blockquote, details)>strong {
    color: inherit !important;
}

// 无效图片样式
.v-img-lost {
    background-image: url("") !important;
    // background-image: url("") !important;
    background-repeat: no-repeat;
    background-size: cover;
    border: none;
    width: 200px;
    height: 100px;
}
.v-img-lost::before {
    content: "\a\a\a\a\a\a\a\a\a\a"; // 将无效图片的错误提示图移出显示区域
}

// 坏链列表
.v-link-error-list {
    display: none;
    padding: 10px 0;
    position: fixed;
    color: var(--d-f-c);
    top: 20px;
    right: 20px;
    bottom: 50px;
    width: var(--v-nav-center-width);
    line-height: @paragraphInnerLineHeight;
    border-radius: var(--v-r-b);
    background: var(--pn-c);
    overflow: auto;
    z-index: 4500;
}
.v-link-error-list-header {
    display: none;
    position: absolute;
    z-index: 10;
    border-radius: var(--v-r-b) var(--v-r-b) 0 0;
    top: 0;
    left: 0;
    height: 30px;
    width: 100%;
    background: linear-gradient(180deg, var(--pn-c) 10px, var(--pn-c-tsp));
    pointer-events: none;
}
.v-link-error-list-body {
    padding: 10px 0;
    height: 100%;
    z-index: 0;
}
.v-link-error-list-items {
    overflow-y: scroll;
    height: 100%;
    z-index: 0;
}
.v-link-error-list-footer {
    position: absolute;
    z-index: 10;
    border-radius: 0 0 var(--v-r-b) var(--v-r-b);
    top: auto;
    left: 0;
    bottom: 0;
    height: 30px;
    width: 100%;
    background: linear-gradient(0deg, var(--pn-c) 10px, var(--pn-c-tsp));
    pointer-events: none;
}

.v-status-bar {
    position: fixed;
    justify-content: center;
    align-items: center;
    border-radius: var(--v-r-s);
    right: 30px;
    bottom: 20px;
    height: 30px;
    z-index: 100;
}
// 状态栏内第 1 个元素
.v-status-bar>div:first-child {
    border-top-left-radius: var(--v-r-s);
    border-bottom-left-radius: var(--v-r-s);
    border: none;
}
// 状态栏内最后 1 个元素
.v-status-bar>div:last-child {
    border-top-right-radius: var(--v-r-s);
    border-bottom-right-radius: var(--v-r-s);
    border: none;
}

// 文档信息
.v-doc-info {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: top;
    color: var(--d-f-c);
    font: normal .75em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    background: var(--pn-c);
    padding: 0 10px;
    min-width: 80px;
    height: 30px;
    opacity: .6;
    cursor: default;
}

// 缩放
.v-zoom-view {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: top;
    color: var(--a-color);
    font: var(--v-f-w-title) .875em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    background: var(--pn-c);
    padding: 0 10px;
    min-width: 80px;
    height: 30px;
    border-left: 1px solid var(--pn-c-alt);
    opacity: .6;
    cursor: pointer;
}
.v-zoom-view.hover {
    background: @aHoverColor !important;
    color: @buttonForeHoverColor !important;
}

// 链接检查结果
.v-link-chk-result {
    justify-content: center;
    align-items: center;
    vertical-align: top;
    color: var(--d-f-c);
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    border-radius: 0 var(--v-r-s) var(--v-r-s) 0;
    display: inline-flex;
    cursor: pointer;
    background: var(--ac-bu-lg);
}
.v-link-chk-result.error {
    background: var(--ac-rd-lg);
}
.v-link-result-error:hover {
    background: var(--d-f-c);
}
.v-link-result-error:hover>svg>use {
    fill: var(--d-bc);
}
.v-link-result-error:active {
    background: var(--ac-rd-lg);
    box-shadow: 0 0 0 2px fade(@accColorRed, 50%);
}
.v-link-result-error:active>svg>use {
    fill: #FFFFFF;
}

.v-link-error-source:focus {
    outline: 2px dashed var(--ac-rd-lg);
}

// table {
// #write table,
// body.typora-export table {
// table.md-grid-board 是编辑时表格行列调整面板的样式
:is(#write, body.typora-export) table {
    border-collapse: inherit;
    border-spacing: 0;
    width: auto;
    line-height: @defaultLineHeight;
    word-break: break-all;
    white-space: pre-wrap;
    border: @tableBorderWidth solid @tableBorderColor;
    border-left-width: @tableBorderLeftWidth;
    border-right-width: @tableBorderRightWidth;
    border-top-width: @tableBorderTopWidth;
    border-bottom-width: @tableBorderBottomWidth;
    border-radius: @tableBorderRadius;
    background: @tableBackground;
}
// :is(#write, body.typora-export) table.md-grid-board {
//     border-collapse: inherit;
//     border-spacing: 0;
//     border: 2px solid var(--tbl-bd);
// }
:is(#write, body.typora-export) table[d-row-group],
:is(#write, body.typora-export) table[d-col-too-more] {
    white-space: pre;
}

// 避免分页后重复显示表头
#write thead {
    display: contents !important;
}

// 表格表头
// #write table>thead>tr>th,
// body.typora-export table>thead>tr>th {
:is(#write, body.typora-export) table>thead>tr>th {
    color: @tableThColor;
    background: @tableThBakcground;
    font: var(--v-f-w-bd) 1em var(--v-f-fm-bd); // [style] [weight] [size/[line-height]] [family]
    border-right: @tableThBorderRightWidth solid var(--tbl-cell-bd);
    margin: 0;
    padding: var(--tbl-cell-padding);//@tableCellPadding;//.5em;
    box-shadow: @tableThBoxShadow;
}

// #write table tr>td,
// body.typora-export table tr>td {
:is(#write, body.typora-export) table td {
    border-right: @tableTdBorderRightWidth solid var(--tbl-cell-bd);
    margin: 0;
    padding: var(--tbl-cell-padding);//@tableCellPadding;//5px;
    vertical-align: top;
}

// thead 首行
:is(#write, body.typora-export) table>thead>tr:first-child>th {
    box-shadow: @tableFirstThBoxShadow;
}

// thead 非首行
:is(#write, body.typora-export) table>thead>tr:not(:first-child)>th {
    box-shadow: @tableThBoxShadow;
}

// table 行 hover，阅读模式（十字光标）未启用时
:is(#write, body.typora-export) table:not([d-tbl-cross="true"])>tbody>tr:hover {
    background: var(--tbl-tr-hv) !important;
}

// tbody 首行
// #write table>tbody>tr:first-child>td,
// body.typora-export table>tbody>tr:first-child>td {
:is(#write, body.typora-export) table>tbody>tr:first-child>td {
    box-shadow: @tableFirstTdBoxShadow;
}
#write .v-tr-repeater+tr>td {
    box-shadow: @tableFirstTdBoxShadow !important;
}
// 非首行
// #write table>tbody>tr:not(:first-child)>td,
// body.typora-export table>tbody>tr:not(:first-child)>td {
:is(#write, body.typora-export) table>tbody>tr:not(:first-child)>td {
    box-shadow: @tableTdBoxShadow;
}

// 偶数行
// #write table>tbody>tr:nth-child(2n),
// body.typora-export table>tbody>tr:nth-child(2n) {
:is(#write, body.typora-export) table>tbody>tr:nth-child(2n) {
    background: @tableTdBakcground;
}

// 表头首行的首列
// #write table>thead>tr:first-child>th:first-child,
// body.typora-export table>thead>tr:first-child>th:first-child {
:is(#write, body.typora-export) table>thead>tr:first-child>th:first-child {
    border-top-left-radius: calc(@tableBorderRadius - 1px);//var(--v-r-t); // 非16px的原因是存在2px的border，避免因圆角半径不同出现空白
    // white-space: pre;
}

// 表头首行的尾列
// #write table>thead>tr:first-child>th:last-child,
// body.typora-export table>thead>tr:first-child>th:last-child {
:is(#write, body.typora-export) table>thead>tr:first-child>th:last-child {
    border-top-right-radius:calc(@tableBorderRadius - 1px);//var(--v-r-t); // 非16px的原因是存在2px的border，避免因圆角半径不同出现空白
}

// 表格末行的首列
// #write table>tbody>tr:last-child>td:first-child,
// body.typora-export table>tbody>tr:last-child>td:first-child {
:is(#write, body.typora-export) table>tbody>tr:last-child>td:first-child {
    border-bottom-left-radius: calc(@tableBorderRadius - 1px);//var(--v-r-t); // 非16px的原因是存在2px的border，避免因圆角半径不同出现空白
}

// 表格末行的尾列
// #write table>tbody>tr:last-child>td:last-child,
// body.typora-export table>tbody>tr:last-child>td:last-child {
:is(#write, body.typora-export) table>tbody>tr:last-child>td:last-child {
    border-bottom-right-radius: calc(@tableBorderRadius - 1px);//var(--v-r-t); // 非16px的原因是存在2px的border，避免因圆角半径不同出现空白
}

// 表格首列
// #wirte table tr>th:first-child,
// #write table tr>td:first-child,
// body.typora-export table tr>th:first-child,
// body.typora-export table tr>td:first-child {
:is(#wirte, body.typora-export) table tr>:is(th, td):first-child {
    // white-space: pre !important; // 表格首列默认不换行
}
// 表格末列
// #write table tr>th:last-child,
// #write table tr>td:last-child,
// body.typora-export table tr>th:last-child,
// body.typora-export table tr>td:last-child {
:is(#write, body.typora-export) table tr>:is(th, td):last-child {
    border-right: 0;
}

// 空白单元格
// #write .v-empty-cell,
// body.typora-export .v-empty-cell {
:is(#write, body.typora-export) .v-empty-cell {
    padding: 1px !important;
    background: var(--tbl-h-bd) !important;
}
// 非首行内的空白单元格
// #write table>tbody>tr:not(:first-child)>td.v-empty-cell,
// body.typora-export table>tbody>tr:not(:first-child)>td.v-empty-cell {
:is(#write, body.typora-export) table>tbody>tr:not(:first-child)>td.v-empty-cell {
    box-shadow: none !important;
}

// #write .v-tr-repeater {
//     border: @tableBorderWidth solid var(--tbl-bd);
//     border-left-width: @tableBorderLeftWidth;
//     border-right-width: @tableBorderRightWidth;
//     border-top-width: @tableBorderTopWidth;
//     border-bottom-width: @tableBorderBottomWidth;
// }
// 重复表头所在行，强制取消行号显示
#write .v-tr-repeater::before {
    content: "" !important;
}

// 重复表头样式
#write .v-th-repeater {
    font: var(--v-f-w-bd) 1em var(--v-f-fm-bd); // [style] [weight] [size/[line-height]] [family]
    color: @tableThColor;
    background: @tableThBakcground;
    // background: var(--tbl-th-bg);
    vertical-align: middle !important;
}
#write .v-th-repeater.first {
    box-shadow: @tableThRepeaterBoxShadow;
    // box-shadow: 0 -2px 0 0 var(--tbl-h-bd), 0 1px 0 0 var(--tbl-h-bd) !important;
}
#write .v-th-repeater.not-first {
    box-shadow: @tableThBoxShadow !important;
    // box-shadow: 0 1px 0 0 var(--tbl-h-bd) !important;
}

// 合并了所有列样式
.v-table-colspan-all {
    padding-left: 5px;
    background: var(--tbl-th-bg);
}
// 空白行，不显示对应的行号
.v-table-colspan-all::before {
    content: "";
}

// 表格列格式：加粗
.v-tbl-col-fmt-bold {
    font: var(--v-f-w-bd) 1em var(--v-f-fm-bd); // [style] [weight] [size/[line-height]] [family]
}

// 表格列格式：斜体
.v-tbl-col-fmt-em {
    font-style: italic;
}

// 表格列格式：高亮
.v-tbl-col-fmt-mark {
    background: var(--mark-bg) !important;
    // text-shadow: 0 1px 0 var(--d-bc);
    font-weight: var(--v-f-w-bd);
    color: var(--d-f-c) !important;
}

// 表格列格式：数值
.v-tbl-col-fmt-num {
    font-family: var(--v-f-fm-num) !important;
}
.v-tbl-col-fmt-num>span {
    font-size: 1.125em;
}
// 表格列格式：负数
.v-tbl-col-fmt-num-positive {
    color: #D00000;
}
// 表格列格式：正数
.v-tbl-col-fmt-num-negative {
    color: #00B000;
}
// 表格列格式：数值－小数部分
.v-tbl-col-fmt-num-decimal {
    font-size: .8em;
}
// 表格列格式：数值－货币
.v-tbl-col-fmt-currency {
    float: left;
    font-weight: normal;
    font-size: .8em;
    padding-top: 3px;
    padding-right: 10px;
    color: var(--d-f-c-alt);
}
// 表格列格式：数值－百分号
.v-tbl-col-fmt-percent {
    opacity: .6;
    font-size: .8em;
}

// 带表格带行折叠时，是目录行的样式
.v-tbl-row-g-folder {
    text-align: left !important;
}
// .v-tbl-row-g-folder>.folder-marker {
//     color: var(--h-f);
// }

// 带表格带行折叠时，不是目录行的样式（有行自动编号）
// #write li>figure table tbody>tr>td.v-tbl-row-g-not-folder,
// #write h6+figure table tbody>tr>td.v-tbl-row-g-not-folder,
// body.typora-export li>figure table tbody>tr>td.v-tbl-row-g-not-folder,
// body.typora-export h6+figure table tbody>tr>td.v-tbl-row-g-not-folder {
:is(#write, body.typora-export) :is(li>figure, h6+figure) table tbody>tr>td.v-tbl-row-g-not-folder {
  text-align: left !important;
  padding-left: 50px !important;
}
// 带表格带行折叠时，不是目录行的样式（无行自动编号）
td.v-tbl-row-g-not-folder {
    text-align: left !important;
    padding-left: 25px !important;
}

// 折叠按钮样式
.v-tbl-row-g-btn {
    line-height: @miniLineHeight;//1;
    vertical-align: middle;
    cursor: pointer;
}

.v-tbl-row-g-btn.hover>svg>use {
    fill: @aHoverColor !important;
}
.v-tbl-row-g-btn.hover:active>svg>use {
    fill: @aActiveColor !important;
}

// 被折叠行的样式
.v-tbl-row-g-sub {
    text-align: left !important;
    padding-left: 5px !important;
}

// 缩进的占位元素样式
.v-tbl-row-g-identer {
    width: 4px;
    height: 32px;
    display: inline-block;
    padding: 0;
    margin: -10px 32px -10px 4px;
    // margin: -10px 58px -10px 4px;
}
// 带表格行号的样式微调
// #write h6+figure table .v-tbl-row-g-identer,
// #write li>figure table .v-tbl-row-g-identer,
// body.typora-export h6+figure table .v-tbl-row-g-identer,
// body.typora-export li>figure table .v-tbl-row-g-identer {
:is(#write, body.typora-export) :is(h6+figure, li>figure) table .v-tbl-row-g-identer {
    // margin-right: 32px;
    margin-right: 58px;
}

// 连续缩进的占位元素进行修正
.v-tbl-row-g-identer+.v-tbl-row-g-identer {
    margin-left: -12px !important;
}
// 带表格行号的样式微调
// #write h6+figure table .v-tbl-row-g-identer+.v-tbl-row-g-identer,
// #write li>figure table .v-tbl-row-g-identer+.v-tbl-row-g-identer,
// body.typora-export h6+figure table .v-tbl-row-g-identer+.v-tbl-row-g-identer,
// body.typora-export li>figure table .v-tbl-row-g-identer+.v-tbl-row-g-identer {
:is(#write, body.typora-export) :is(h6+figure, li>figure) table .v-tbl-row-g-identer+.v-tbl-row-g-identer {
    margin-right: 30px !important;
}

// 缩进的单元格为目录节点
.v-tbl-row-g-identer-folder {
    margin-right: 38px;
}
// 带表格行号的样式微调
// #write h6+figure table .v-tbl-row-g-identer-folder,
// #write li>figure table .v-tbl-row-g-identer-folder,
// body.typora-export figure table .v-tbl-row-g-identer-folder,
// body.typora-export li>figure table .v-tbl-row-g-identer-folder {
:is(#write, body.typora-export) figure table .v-tbl-row-g-identer-folder {
    margin-right: 12px !important;
}
:is(#write, body.typora-export) li>figure table .v-tbl-row-g-identer-folder {
    margin-right: 38px !important;
}
// 连续缩进的占位元素修正
// #write h6+figure table .v-tbl-row-g-identer+.v-tbl-row-g-identer-folder,
// #write li>figure table .v-tbl-row-g-identer+.v-tbl-row-g-identer-folder,
// body.typora-export h6+figure table .v-tbl-row-g-identer+.v-tbl-row-g-identer-folder,
// body.typora-export li>figure table .v-tbl-row-g-identer+.v-tbl-row-g-identer-folder {
:is(#write, body.typora-export) :is(h6+figure, li>figure) table .v-tbl-row-g-identer+.v-tbl-row-g-identer-folder {
    margin-right: 10px !important;
}

// li/header下的表格增加表格行号
// #write li>figure table,
// #write h6+figure table,
// body.typora-export li>figure table,
// body.typora-export h6+figure table {
:is(#write, body.typora-export) :is(li>figure, h6+figure) table {
    counter-reset: tableRowNumber - 1;
}

// #write li>figure table tbody tr,
// #write h6+figure table tbody tr,
// body.typora-export li>figure table tbody tr,
// body.typora-export h6+figure table tbody tr {
:is(#write, body.typora-export) :is(li>figure, h6+figure) table tbody tr {
    counter-increment: tableRowNumber;
}

// 表格表头行号
// 该过滤器更新后，须同步更新长表格折叠 tableFolding() 中对应的过滤器
// #write figure table tr::before,
// body.typora-export figure table tr::before {
:is(#write, body.typora-export) figure table tr::before {
    content: "";
    color: var(--h-f);
    font: normal normal .8em var(--v-f-fm-num) !important; // [style] [weight] [size/[line-height]] [family]
    vertical-align: middle;
    text-align: right;
    width: 2.5em;
    position: absolute;
    left: 1em;
    padding-top: 5px;
}

// 列表下的表格表头行号
// 该过滤器更新后，须同步更新长表格折叠 tableFolding() 中对应的过滤器
// #write li>figure table tbody tr::before,
// body.typora-export li>figure table tbody tr::before {
:is(#write, body.typora-export) li>figure table tbody tr::before {
    content: counter(tableRowNumber);
    text-align: right;
    margin-top: @tableRowNumTop;
    margin-left: -20px;
    color: var(--d-f-c-alt);
    color: var(--h-f);
    position: absolute;
}
// hover 时行号内容样式
// #write li>figure table tbody tr:hover::before,
// body.typora-export li>figure table tbody tr:hover::before {
:is(#write, body.typora-export) li>figure table tbody tr:hover::before {
    content: @tableRowCursor;
    color: @aLineColor;
}

// 表格折叠后强制隐藏表格行号
.v-tbl-row-num-hidden::before {
    content: "" !important;
}

// h1-6 下的表格行号
// #write h6+figure table tbody tr::before,
// body.typora-export h6+figure table tbody tr::before {
:is(#write, body.typora-export) h6+figure table tbody tr::before {
    content: counter(tableRowNumber);
    text-align: right;
    margin-top: @tableRowNumTop;
    margin-left: 0px;
    color: var(--h-f);
    position: absolute;
}
// hover 时行号内容样式
// #write h6+figure table tbody tr:hover::before,
// body.typora-export h6+figure table tbody tr:hover::before {
:is(#write, body.typora-export) h6+figure table tbody tr:hover::before {
    content: @tableRowCursor;
    color: @aLineColor;
}

// 应显示表格行的表格的首列
// #write li>figure table tr>th:first-child,
// #write li>figure table tr>td:first-child,
// #write h6+figure table tr>th:first-child,
// #write h6+figure table tr>td:first-child,
// body.typora-export li>figure table tr>th:first-child,
// body.typora-export li>figure table tr>td:first-child,
// body.typora-export h6+figure table tr>th:first-child,
// body.typora-export h6+figure table tr>td:first-child {
:is(#write, body.typora-export) :is(li>figure, h6+figure) table tr>:is(th, td):first-child {
    padding-left: 30px;
}

// li/header 后的表格，格式微调
#write li>figure {
    margin-top: 0;
}

// h1-6 后的表格，格式微调
// #write h1+figure,
// #write h2+figure,
// #write h3+figure,
// #write h4+figure,
// #write h5+figure,
// #write h6+figure {
#write :is(h1,h2,h3,h4,h5,h6)+figure {
    margin-top: 0;
}

// 表格阅读模式（十字光标）
.v-table-cross {
    top: 0;
    width: 100px;
    height: 100px;
    position: absolute;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}
.v-table-cross-cell {
    box-shadow: 0 0 0 4px var(--d-f-c-alt) !important;
    border-radius: @tableBorderRadius;//6px;
}
.v-table-cross.left-up {
    background: linear-gradient(315deg, transparent, @tableCrossBgColor 20px, fade(@aLineColor, 1%));
    border-bottom-right-radius: @tableBorderRadius;//var(--v-r-b);//12px;
}
.v-table-cross.right-up {
    background: linear-gradient(45deg, transparent, @tableCrossBgColor 20px, fade(@aLineColor, 1%));
    border-bottom-left-radius: @tableBorderRadius;//var(--v-r-b);//12px;
}
.v-table-cross.left-down {
    background: linear-gradient(210deg, transparent, @tableCrossBgColor 20px, fade(@aLineColor, 1%));
    border-top-right-radius: @tableBorderRadius;//var(--v-r-b);//12px;
}
.v-table-cross.right-down {
    background: linear-gradient(135deg, transparent, @tableCrossBgColor 20px, fade(@aLineColor, 1%));
    border-top-left-radius: @tableBorderRadius;//var(--v-r-b);//12px;
}

.v-table-wrap {
    white-space: pre-wrap !important;
}

.v-table-unwrap {
    white-space: pre !important;
}

// 高亮
// #write mark {
mark {
    box-shadow: 0 -.9em 0 0 var(--mark-bg) inset;
    // text-shadow: 0 1px 0 var(--d-bc);
    font-weight: var(--v-f-w-bd);
    color: inherit;
    background: none;
}

// 删除
// #write del,
// #write del strong {
#write :is(del, del strong) {
    color: var(--d-f-c-alt) !important;
    text-decoration: line-through solid !important;
}

#write del code {
    // font-style: italic;
    // text-decoration: line-throug solid !important;
    text-decoration: line-through !important;
}

// 脚注区域
.footnotes-area {
    margin-top: 100px;
}

// 文档末尾的脚注行
.footnote-line {
    font-size: 1em;
    margin-top: .5em;
    padding-bottom: .5em;
}

// 弹层中的脚注行
.v-foot-note-panel-content>.footnote-line {
    padding-bottom: 50px;
}

// 脚注行序末返回链接
.reversefootnote {
    color: @accColorBlue;
}

.reversefootnote:hover {
    color: @accColorRed;
}

// 脚注上标
#write a[name^="ref-footnote-"] {
    font: normal .75em var(--v-f-fm-bd); // [style] [weight] [size/[line-height]] [family]
    color: @accColorBlue;
}

#write a[name^="ref-footnote-"]:hover {
    color: @aActiveColor;
}

tt,
code {
    font: var(--v-f-w-text) .875em/@defaultLineHeight var(--v-f-fm-code); // [style] [weight] [size/[line-height]] [family]
    color: var(--code-t);
    background: var(--code-bg);
    border-radius: var(--v-r-s);
    padding: 4px 5px;
    line-height: 1;
    margin: 0;
    box-shadow: 0 0 0 1px var(--std-code-shadow) inset;
    display: inline-block;
    text-align: inherit;
    // vertical-align: middle;
}
.v-std-code {
    cursor: var(--cur-copy);
}
.v-std-code.hover {
    filter: brightness(@hoverBrightness);
}

// 引用内的 code
#write blockquote code {
    color: var(--ac-t2-lg);
    background: var(--d-bc);
}
// 引用内的表格中的 code
#write blockquote table code {
    color: var(--code-t);
    background: var(--code-bg);
}

// strong tt,
// strong code {
strong :is(tt, code) {
    font-weight: var(--v-f-w-bd);
}

// 生成题注后的样式调整，未生成题注前的样式主要在编辑时使用
.v-caption>.md-fences {
    margin: 0;
}

.mathjax-block>.code-tooltip {
    bottom: .375em;
}

.md-tag {
    color: inherit;
}

/**************************************
* Header Counters in Content 内容中的目录序号样式
**************************************/

#write {
    counter-reset: h1;
}

#write h1 {
    counter-reset: h2;
}

#write h2 {
    counter-reset: h3;
}

#write h3 {
    counter-reset: h4;
}

#write h4 {
    counter-reset: h5;
}

#write h5 {
    counter-reset: h6;
}

// #write h1::before,
// #write h2::before,
// #write h3::before,
// #write h4::before,
// #write h5::before,
// #write h6::before {
#write :is(h1,h2,h3,h4,h5,h6)::before,
#write :is(h1,h2,h3,h4,h5,h6)::after {
    color: @contentHeaderNumColor;
    letter-spacing: 0;
    -webkit-text-stroke: initial;
    text-stroke: initial;
    text-shadow: none;
}

#write h1::before {
    counter-increment: h1;
    content: @h1BeforeContent;
}

#write h2::before {
    counter-increment: h2;
    content: @h2BeforeContent;
}

#write h3::before {
    counter-increment: h3;
    content: @h3BeforeContent;
}

#write h4::before {
    counter-increment: h4;
    content: @h4BeforeContent;
}

#write h5::before {
    counter-increment: h5;
    content: @h5BeforeContent;
}

#write h6::before {
    content: @h6BeforeContent;//"❖ "; // ◎
}

// 导出 HTML 后的文档章节目录的自动编码内容
// body.typora-export #write h1::before,
// body.typora-export #write h2::before,
// body.typora-export #write h3::before,
// body.typora-export #write h4::before,
// body.typora-export #write h5::before,
// body.typora-export #write h6::before {
body.typora-export #write :is(h1,h2,h3,h4,h5,h6)::before {
    content: attr(d-header-num) !important;
}

kbd {
    font: var(--v-f-w-bd) .75em var(--v-f-fm-key); // [style] [weight] [size/[line-height]] [family]
    border-radius: var(--v-r-s-small);
    margin: 0;
    padding: 0px 4px;
    color: var(--d-bc);
    border: 2px solid var(--key-shadow);
    border-left-color: var(--key-reflect);
    border-top-color: var(--key-reflect);
    background: var(--key-bg);
    box-shadow: 0 0 0 1px var(--key-shadow);
}

table kbd {
    display: inline-block;
    // margin: 2px 0;
}

/**************************************
* VLOOK UI 自定义样式
**************************************/

// 聚光灯模式
.v-spotlight {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    pointer-events: none;
    z-index: 5000;
}

// 在 Dark 模式时对文档内容的微调处理
.v-spotlight-in-dark {
    filter: brightness(1.2);
}

// 激光笔鼠标形状
.v-cursor-laser {
    cursor: url(""), auto !important;
}

// 过渡效果样式集
.v-transition-all {
    transition: all var(--v-trans-dur) ease-out;
}
.v-transition-box-shadow {
    transition: box-shadow var(--v-trans-dur) ease-out;
}
.v-transition-opacity {
    transition: opacity var(--v-trans-dur) ease-out;
}
.v-transition-left {
    transition: left var(--v-trans-dur) ease-out;
}
.v-transition-background {
    transition: background var(--v-trans-dur) ease-out;
}

.v-tool-tips,
.v-info-tips {
    display: none;
    position: fixed;
    margin-left: auto;
    padding: 10px;
    text-align: center;
    white-space: pre-wrap;
    border-radius: var(--v-r-b);
    border: 1px solid var(--tbl-bd);
    font: normal 1em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    background: var(--pn-c);
    cursor: default;
    z-index: 3000;
}
.v-info-tips.error {
    color: #FFFFFF;
    border-color: var(--ac-rd-lg);
    background: var(--ac-rd-lg);
    padding: 5px 10px;
}
.v-info-tips.bubble {
    color: var(--d-bc);
    border-color: var(--d-f-c-alt);
    background: var(--d-f-c);
    padding: 5px 10px;
}

.v-tool-tips {
    visibility: hidden;
    opacity: 0;
    display: block;
    padding: 5px 10px;
    border-top: 0;
    box-shadow: 0 2px 0 0 @aLineColor inset, var(--v-float-shadow), @contrastBorder;
    text-align: left;
    white-space: pre;
    font-size: .875em;
}

.v-tool-tips.accent {
    box-shadow: 0 2px 0 0 @buttonBgColor inset, var(--v-float-shadow), @contrastBorder;
}

// .v-tool-tips a,
// .v-info-tips a {
:is(.v-tool-tips, .v-info-tips) a {
    font-weight: var(--v-f-w-bd);
    text-decoration: none;
}

// 底部信息栏
.v-bottom-tips {
    font: var(--v-f-w-bd) 1em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    color: #FFFFFF;
    text-shadow: 0 1px #000000;
    width: 100%;
    height: 60px;
    text-align: center;
    bottom: 0;
    padding-top: 16px;
    background: linear-gradient(0deg, #000000, transparent);
    // background: linear-gradient(0deg, #404448, transparent);
    position: fixed;
    display: none;
    pointer-events: none;
    z-index: 5001;
}
.v-bottom-tips>div {
    bottom: 10px;
    width: 100%;
    position: fixed;
}
.v-bottom-tips kbd {
    margin: 0 4px;
    text-shadow: none;
    color: var(--d-bc-dk);
    border: 3px solid var(--key-shadow-dk);
    border-left-color: var(--key-reflect-dk);
    border-top-color: var(--key-reflect-dk);
    background: var(--key-bg-dk);
    box-shadow: 0 0 0 1px var(--key-shadow-dk);
}

// 字体风格选择器
.v-font-theme {
    // width: 647px;
    display: none;
    position: fixed;
    padding: 10px;
    text-align: center;
    border-radius: var(--v-r-b);
    border: 1px solid var(--tbl-bd);
    font: normal 1em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    background: var(--pn-c);
    z-index: 3000;
}
.v-font-theme > .v-font-theme-opt {
    vertical-align: top;
    display: inline-block;
    margin: 0 0 30px 10px;
}

// 字体风格选择器字体包下载提示
.v-font-theme-info {
    font-size: .75em;
    width: 600px;
    margin: auto;
    overflow: auto;
    border-radius: var(--v-r-s);
}

// 字体风格选项：系统默认
.v-font-theme-opt-local,
// 字体风格选项：Book
.v-font-theme-opt-book,
// 字体风格选项：小清新
.v-font-theme-opt-sans,
// 字体风格选项：文艺范
.v-font-theme-opt-serif {
    border-radius: var(--v-r-s) !important;
    filter: opacity(.6);
    cursor: pointer;
}

// 字体风格选项鼠标事件效果
.v-font-theme-opt-local:hover,
.v-font-theme-opt-book:hover,
.v-font-theme-opt-sans:hover,
.v-font-theme-opt-serif:hover {
    filter: opacity(1);
    box-shadow: 0 0 0 2px @aLineColor;
}
.v-font-theme-opt-local:active,
.v-font-theme-opt-book:active,
.v-font-theme-opt-sans:active,
.v-font-theme-opt-serif:active {
    box-shadow: 0 0 0 2px @aActiveColor;
}

// 当前选择的字体风格选项
.v-font-theme-opt-local.selected,
.v-font-theme-opt-book.selected,
.v-font-theme-opt-sans.selected,
.v-font-theme-opt-serif.selected {
    box-shadow: 0 0 0 4px var(--h-f) !important;
    filter: opacity(1) !important;
}

// 字体包信息
.v-fontinfo-local,
.v-fontinfo-book,
.v-fontinfo-sans,
.v-fontinfo-serif {
    margin-top: 10px;
    text-align: left;
    font-size: .875em;
}
// 字体包加载状态
.v-fontinfo-local>#fontset-status,
.v-fontinfo-book>#fontset-status,
.v-fontinfo-sans>#fontset-status,
.v-fontinfo-serif>#fontset-status {
    color: var(--d-f-c-alt);
}

// 长内容扩展面板
.v-content-expander {
    font: var(--v-f-w-bd) 1em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    height: 110px;
    margin-top: -7.375em;//-120px;
    background: linear-gradient(0deg, var(--d-bc) 10px, var(--d-bc-tsp));
    border-radius: 0 0 var(--v-r-b) var(--v-r-b);
    position: absolute;
    text-align: center;
    vertical-align: bottom;
    visibility: hidden;
    z-index: 10;
    pointer-events: none;
}

.v-content-expander>.v-btn {
    margin-top: 60px;
    width: auto;
    padding-left: 15px;
    padding-right: 15px;
    font-size: .875em;
    border-radius: var(--v-r-s);
    background: @buttonBgColor;
    pointer-events: all;
}

// Light Mode 的文档图标（标签栏、收藏夹图标）
.v-doc-logo-light {
    margin-top: 100px;
    width: 100%;
    height: 80px;
    background-image: var(--thm-fav-logo-lg);//url(@themeLogoLight);
    background-size: 80px 80px;
    background-repeat: no-repeat;
    background-position: top center;
}

// Dark Mode 的文档图标（标签栏、收藏夹图标）
.v-doc-logo-dark {
    display: none;
    margin-top: 30px;
    width: 100%;
    height: 80px;
    background-image: var(--thm-fav-logo-dk);//url(@themeLogoDark);
    background-size: 80px 80px;
    background-repeat: no-repeat;
    background-position: top center;
}

.v-welcome-page {
    cursor: wait;
    position: fixed;
    color: @buttonForeColor;
    background: @buttonBgColor;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    overflow: auto;
    visibility: hidden;
    opacity: 0;
    z-index: 6000;
}

// 按钮呼吸动画
@keyframes breathe-button {
    0% {
        opacity: 1;
        transform: scale(1.1);
        filter: brightness(1.2);
    }
    100% {
        opacity: .8;
        transform: scale(1);
        filter: brightness(1);
    }
}

.v-welcome-page>.v-tips {
    font: var(--v-f-w-title) 1.75em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    padding: 20px 20px 10px 20px;
}

.v-welcome-page>.v-tips>div {
    text-align: center;
    line-height: @miniLineHeight;
    margin-bottom: 50px;
}
.v-welcome-page>.v-tips>.v-date {
    font-weight: normal;
    font-size: .625em;
    margin-bottom: 20px;
}
.v-welcome-page>.v-tips>.v-author {
    font-weight: normal;
    font-size: .875em;
    margin-bottom: 20px;
}
.v-welcome-page>.v-tips>.v-author::before {
    content: "by";
    font-size: .625em;
    opacity: .6;
    display: block;
    margin-bottom: .375em;
}

.v-welcome-page>.v-loading {
    cursor: not-allowed;
    padding: .2em .5em;
    border: 1px solid @buttonForeColor;
    font: italic normal 1.25em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    display: inline-block;
    border-radius: var(--v-r-b);
    margin-bottom: 2em;
    opacity: .5;
}

.v-welcome-page>.v-btn-done {
    cursor: pointer;
    border: 2px solid @buttonForeHoverColor;
    font-style: normal;
    font-weight: var(--v-f-w-title);
    font-size: 1.25em;
    color: @buttonForeHoverColor;
    background: @aLineColor;
    opacity: 1;
    animation: breathe-button 1s ease 1 alternate;
}
.v-welcome-page>.v-btn-done:hover {
    color: @aLineColor;
    background: @buttonForeHoverColor;
    box-shadow: var(--v-float-shadow);
}
.v-welcome-page>.v-btn-done:active {
    border: none;
    color: @buttonForeHoverColor;
    background: @aLineColor;
    box-shadow: 0 0 0 2px fade(@aLineColor, 50%);
    transform: none;
}

.v-welcome-page>.v-btn-done.wait {
    animation: breathe-button 1s 10 alternate;
}

.v-welcome-page>.v-btn-done>span {
    font-weight: normal;
}

// 用于段落导航
#write .v-pg-current-item {
    box-shadow: 0 0 10px 0 @aLineColor;
    border-radius: var(--v-r-b);
}

// 修正在 SVG 顺序图的下边界与 actor 无间隔问题
// .md-diagram-panel svg[viewBox^="-"],
// .v-fig-content svg[viewBox^="-"] {
:is(.md-diagram-panel, .v-fig-content) svg[viewBox^="-"]{
    padding-bottom: @scrollFix;
}

// .md-diagram-panel svg,
.v-fig-content svg:not([data-inject-url]) { // 跳过由 SVGInject 生成的 svg
    width: 100%;
}

// 折叠引用所在行
p[d-blockquote-folded] {
    cursor: pointer;
}
// 折叠引用按钮
.v-blockquote-folder {
    line-height: @miniLineHeight;
    vertical-align: middle;
    cursor: pointer;
}

p[d-blockquote-folded]:hover .v-blockquote-folder>svg>use,
.v-blockquote-folder.hover>svg>use {
    fill: @aHoverColor !important;
}
p[d-blockquote-folded]:active .v-blockquote-folder>svg>use,
.v-blockquote-folder.hover:active>svg>use {
    fill: @aActiveColor !important;
}

.v-nav-center {
    background: var(--pn-c);
    border-radius: var(--v-r-b);
    cursor: default;
    display: block;
    left: var(--v-nav-center-hidden-left);
    top: 10px;
    bottom: 40px;
    width: var(--v-nav-center-width);
    padding: 0;
    position: fixed;
    z-index: 2000;
    user-select: none;
}

.v-nav-center-float {
    top: 20px;
    bottom: 50px;
    box-shadow: var(--v-float-shadow);
}

.v-nav-center-block {
    top: 60px;
    bottom: 10px;
    box-shadow: var(--v-float-shadow), var(--v-float-inn-shadow);
}

// 导航中心头部
.v-nav-center-header {
    color: var(--d-f-c);
    font: normal 1em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    height: 100px;
    padding: 0;
    background: linear-gradient(180deg, var(--pn-c) 90px, var(--pn-c-tsp));
    left: 1px;
    right: 1px;
    top: 1px;
    position: absolute;
    border-top-right-radius: var(--v-r-b);
    border-top-left-radius: var(--v-r-b);
    z-index: 10;
}

// 导航中心标签栏
.v-segment {
    text-align: center;
    height: 34px;
    border-radius: var(--v-r-s);
    margin: 10px;
    padding: 2px;
    background: var(--pn-c-alt);
}
// 导航中心标签栏按钮
.v-segment>input[type="radio"] {
    display: none;
}
.v-segment>input[type="radio"]:checked+.v-segment-btn>svg>use {
    fill: @buttonForeColor;
}

.v-segment>input[type="radio"][d-result="none"]+label,
.v-result-none {
    opacity: .2;
    cursor: not-allowed;
}

.v-segment-indicator {
    position: absolute;
    left: 12px;
    top: 52px;
    width: 40px;
    height: 30px;
    background: @buttonBgColor;
    border-radius: calc(var(--v-r-s) - 1px);
    z-index: 0;
}
.v-segment-indicator>svg>use {
    fill: @buttonForeColor;
}

.v-segment-btn {
    width: 16%;
    height: 30px;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    border-radius: calc(var(--v-r-s) - 1px);
    float: left;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    z-index: 10;
}
.v-segment-btn.hover {
    background: @aHoverColor;
}
.v-segment-btn.hover>svg>use {
    fill: @buttonForeHoverColor;
}
.v-segment-btn:active {
    background: @aActiveColor;
    box-shadow: 0 0 0 2px fade(@aActiveColor, 50%) !important;
    transition: none;
}
.v-segment-btn:active>svg>use {
    fill: @buttonForeHoverColor;
}
// 大纲索引 tab
.v-segment-btn.catalog {
    margin: 0 .8% 0 0;
}
// 插图索引 tab
.v-segment-btn.figure {
    margin: 0 .8% 0 0;
}
// 表格索引 tab
.v-segment-btn.table {
    margin: 0 .8% 0 0;
}
// 多媒体索引 tab
.v-segment-btn.media {
    margin: 0 .8% 0 0;
}
// 代码块索引 tab
.v-segment-btn.codeblock {
    margin: 0 .8% 0 0;
}
// 访问历史 tab
.v-segment-btn.history {
    margin: 0;
}

.v-nav-center-body {
    width: 100%;
    height: 100%;
    padding: 70px 1px 10px 1px;
    border-radius: var(--v-r-b);
    overflow: auto;
    overflow-y: hidden;
}
.v-nav-center-body.has-doc-lib {
    padding-bottom: 85px;
}

.v-toc-catalog-body {
    width: 100%;
    height: 100%;
    padding: 10px 0 0 0;
    overflow-y: scroll;
}
.v-toc-catalog-body::after {
    content: attr(d-catalog-empty);
    color: var(--d-f-c-alt);
    position: absolute;
    text-align: center;
    top: 150px;
    width: 100%;
}
.v-toc-catalog-body:not(:empty)::after {
    content: "";
}

.v-nav-center-footer {
    height: 30px;
    line-height: 40px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    text-align: center;
    padding: 0;
    background: linear-gradient(0deg, var(--pn-c) 10px, var(--pn-c-tsp));
    border-bottom-right-radius: var(--v-r-b);
    border-bottom-left-radius: var(--v-r-b);
    position: absolute;
    z-index: 10;
    pointer-events: none;
}
.v-nav-center-footer.has-doc-lib {
    bottom: 76px;
    border-radius: 0;
}

.v-toc-handle {
    position: fixed;
    display: none;
    top: 390px;
    left: 8px;
    width: 4px;
    height: 80px;
    background: var(--tbl-bd);
    border-radius: 2px;
    z-index: 2000;
}
.v-toc-handle.hover {
    background: var(--d-f-c);
}

body.typora-export .v-copyright {
    left: 0;
    bottom: 0;
    text-align: center;
    width: 100%;
    height: 40px;
    padding: 5px 10px;
    font: normal .875em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    position: absolute;
    color: #FFFFFF !important;
    border: none;
}
body.typora-export .v-copyright a {
    color: #FFFFFF !important;
    border-bottom: @aBorderWidth solid #FFFFFF;
    text-shadow: none;
    text-decoration: none;
}
body.typora-export .v-copyright a:hover {
    box-shadow: 0 -.3em 0 0 rgba(255, 255, 255, .3) inset;
}
body.typora-export .v-copyright a:active {
    background: #000000;
    border-radius: var(--v-r-s);
    border-bottom: 0;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .5);
    transition: none;
}

.v-float-card {
    box-shadow: var(--v-float-shadow), @contrastBorder;
}
.v-float-card2 {
    box-shadow: var(--v-float-shadow), var(--v-float-inn-shadow);//0 0 0 1px rgba(0, 0, 0, .3);
}

.v-foot-note-panel {
    position: fixed;
    left: 15%;
    right: 15%;
    bottom: 90px;
    height: 200px;
    border-radius: var(--v-r-b);
    box-shadow: var(--v-float-shadow);
    margin: 0 auto;
    background: var(--pn-c);
    display: none;
    z-index: 2100;
}

body.typora-export .v-foot-note-panel>a {
    color: var(--d-f-c);
    text-decoration: none;
}

.v-foot-note-panel-header {
    height: 25px;
    top: 2px;
    left: 2px;
    right: 2px;
    position: absolute;
    background: linear-gradient(180deg, var(--pn-c) 5px, var(--pn-c-tsp));
    border-radius: var(--v-r-b);
}

.v-foot-note-panel-content {
    width: 100%;
    top: 2px;
    bottom: 2px;
    padding: 10px 20px;
    position: absolute;
    overflow-x: auto;
}

.v-foot-note-panel-all {
    font-weight: var(--v-f-w-bd);
    height: 60px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    line-height: 70px;
    bottom: 0;
    padding: 0 20px;
    margin: 2px;
    border-radius: var(--v-r-b);
    background: linear-gradient(0deg, var(--pn-c) 35px, var(--pn-c-tsp));
    position: absolute;
}

.v-more-doc-content-before {
    width: 100%;
    height: 110px;
    background: linear-gradient(180deg, var(--d-bc) 50px, var(--d-bc-tsp));
    position: fixed;
    top: 0;
    pointer-events: none;
    display: none;
    opacity: .9;
    z-index: 99;
}
.v-more-doc-content-before.cover{
    top: 0;
    height: 60px;
    background: linear-gradient(180deg, var(--d-bc), var(--d-bc-tsp));
}
.v-more-doc-content-after {
    width: 100%;
    height: 60px;
    background: linear-gradient(0deg, var(--d-bc), var(--d-bc-tsp));
    position: fixed;
    bottom: 0;
    pointer-events: none;
    display: block;
    opacity: .9;
    z-index: 99;
}

.v-toolbar {
    border-bottom-left-radius: var(--v-r-b);
    border-bottom-right-radius: var(--v-r-b);
    left: 20px;
    top: 10px;
    padding: 10px;
    width: var(--v-nav-center-width);
    height: 50px;
    position: fixed;
    background: @buttonBgColor;
    display: none;
    z-index: 100;
}
.v-toolbar.cover {
    width: auto;
    right: 20px;
    background: none;
}

.v-toolbar-spliter {
    display: flex;
    width: 40px;
    height: 30px;
    padding: 0;
    float: right;
}

.v-toolbar-smallscreen {
    top: 50px;
    padding-left: 0;
    padding-right: 0;
}

// 用于替代默认的样式，但不设置 ::before
.v-toc-item,
.md-toc-item {
    color: var(--d-f-c);
    font: normal 1em/@defaultLineHeight var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    margin: 0 10px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-right: 5px;
    border-radius: var(--v-r-s);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    line-height: @miniLineHeight;
    cursor: pointer;
}
.v-toc-item {
    white-space: normal;
    line-height: @miniLineHeight;
    padding: 8px;
    margin-bottom: 5px;
    display: block;
}
.md-toc-item::before {
    color: var(--toc-h-num-color);
    padding-left: 5px;
}
.v-toc-item:hover,
.md-toc-item:hover {
    background: var(--pn-c-alt);
}
.v-toc-item:active,
.md-toc-item:active {
    color: var(--d-bc);
    background: var(--d-f-c-alt);
    box-shadow: @tocItemActive_boxShadow;//0 0 0 2px fade(@headerColor, 50%);
    transition: none;
}
.v-toc-item:active::before,
.md-toc-item:active::before {
    color: var(--d-bc);
}
.v-toc-item:active>span {
    color: var(--d-bc);
}
// .v-toc-item:active svg>use,
// .md-toc-item:active svg>use {
:is(.v-toc-item:active, .md-toc-item:active) svg>use {
    fill: var(--d-bc);
}

// .v-toc-item>span, // 目录大纲搜索结果的自动编号
// .v-cap-1>span {  // 题注前缀
:is(.v-toc-item, .v-cap-1, .v-cap-2)>span {  // 题注前缀
    color: var(--d-f-c-alt);
    font-size: .875em;
    padding-bottom: 4px;
}
.v-toc-item>span {
    display: block;
}

.md-toc,
.v-toc {
    margin-top: 20px;
    margin-bottom: .5em;
    border-radius: 0;
    font-size: 1em;
    line-height: 2;
}

#write .md-toc-item a {
    font-weight: normal;
    text-decoration: none;
    padding: 0 0 0 0;
    border-radius: 0;
    border: none;
}

#write .md-toc-item a:hover {
    color: var(--d-f-c) !important;
    box-shadow: none;
    text-decoration: none;
    border: none;
}

.v-toc-item-current {
    font-weight: var(--v-f-w-title);
    background: var(--blockquote-bg);
    box-shadow: @tocItemCurrent_boxShadow;//0 0 0 2px fade(@headerColor, 50%) inset;
}

.v-toc-folder {
    float: left;
    width: 20px;
    text-align: center;
}

.v-toc-folder.hover>svg>use {
    fill: @aHoverColor !important;
}
.v-toc-folder.hover:active>svg>use {
    fill: @buttonForeColor !important;
}

.v-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: top;
    color: @buttonForeColor;
    cursor: pointer;
    padding: 0;
    width: var(--v-toolbar-btn-width);
    height: 30px;
    border-radius: var(--v-r-s);
}

// 按钮 pin 状态
.v-btn.selected {
    background: darken(@buttonBgColor, 20%) !important;
    box-shadow: @contrastBorder;
}

.v-btn.first {
    border-radius: var(--v-r-si) 0 0 var(--v-r-si) !important;
}
.v-btn.middle {
    border-radius: 0 !important;
}
.v-btn.last {
    border-radius: 0 var(--v-r-si) var(--v-r-si) 0 !important;
}

.v-btn.hover {
    background: @aHoverColor !important;
    color: @buttonForeHoverColor !important;
}

.v-btn.hover>svg>use {
    fill: @buttonForeHoverColor;
}

.v-btn.float,
.v-btn-group.float {
    background: @buttonBgColor;
}

.v-btn:active {
    background: @aActiveColor !important;
    box-shadow: 0 0 0 2px fade(@aActiveColor, 50%) !important;
    transition: none;
    z-index: 1;
}

// 音频资源加载中动画
@keyframes loading-circle {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(359deg);
    }
}
.v-audio-mini-control.loading {
    animation: loading-circle 2s ease infinite;
}

.v-audio-mini-control {
    background: @buttonBgColor;
    border-radius: var(--v-r-c);
    text-align: center;
    line-height: 30px;
    height: 30px;
    width: 30px;
    padding: 2px;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    display: inline-flex;
    cursor: pointer;
}

.v-audio-mini-control.disabled {
    background: #B0B4B8;
    cursor: not-allowed;
}

.v-audio-mini-control.hover {
    background: @aHoverColor;
    box-shadow: var(--v-float-shadow);
    color: @buttonForeHoverColor;
}

.v-audio-mini-control.hover:active {
    background: @aActiveColor;
}

.v-duration-info {
    // color: var(--d-bc);
    color: var(--d-f-c-alt);
    // border-radius: 0 var(--v-r-tag) var(--v-r-tag) var(--v-r-tag);
    padding: 0 5px;
    // background: var(--d-f-c-alt);
    font-weight: bold;
}

// 音频播放中状态
@keyframes breathe-circle {
    0% {
        box-shadow: 0 0 0 0 fade(@aHoverColor, 70%);
    }
    100% {
        box-shadow: 0 0 0 3px fade(@aHoverColor, 70%);
    }
}
.v-audio-mini-control.playing {
    animation: breathe-circle 500ms infinite alternate;
}

.v-chapter-nav {
    color: @buttonForeColor;
    background: @buttonBgColor;
    border-bottom-left-radius: var(--v-r-b);
    border-bottom-right-radius: var(--v-r-b);
    top: -50px;
    left: calc(var(--v-nav-center-width) + 50px); // 注意 +/- 号前后须留空格
    right: 20px;
    height: 50px;
    position: fixed;
    padding: 0;
    vertical-align: middle;
    z-index: 100;
    user-select: none;
    display: none;
}

.v-chapter-nav-prev {
    top: 0;
    left: 0;
    width: 20%;
    height: 50px;
    position: absolute;
    cursor: pointer;
    border-bottom-left-radius: var(--v-r-b);
}
// 无特效（effect=0）时使用的样式
.v-chapter-nav-prev.noeffect.hover {
    background: linear-gradient(to right, @aHoverColor, @buttonBgColor);
    border-bottom-left-radius: var(--v-r-b);
}
.v-chapter-nav-prev.effect.hover>svg>use,
.v-chapter-nav-prev.noeffect.hover>svg>use {
    fill: @buttonForeHoverColor;
}
.v-chapter-nav-prev.effect.hover>.v-chapter-nav-prev-text,
.v-chapter-nav-prev.noeffect.hover>.v-chapter-nav-prev-text {
    color: @buttonForeHoverColor;
}
// 有特效（effect>=1）时使用的样式
.v-chapter-nav-prev.effect::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(to right, @aHoverColor, @buttonBgColor);
    border-bottom-left-radius: var(--v-r-b);
    opacity: 0;
    z-index: -1;
}
// 有特效（effect>=1）时使用的样式
.v-chapter-nav-prev.effect.hover::before {
    opacity: 1;
}
// 无特效（effect=0）时，有特效（effect>=1）时使用的样式
.v-chapter-nav-prev.noeffect:active,
.v-chapter-nav-prev.effect:active,
.v-chapter-nav-prev.effect:active::before {
    background: linear-gradient(to right, desaturate(@aHoverColor, 30%), @buttonBgColor);
}

.v-chapter-nav-prev-text {
    top: 0;
    left: 40px;
    width: 100%;
    height: 50px;
    font: normal 1em/50px var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    color: @buttonForeColor;
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
    display: block;
}

.v-chapter-nav-doc-title {
    font: normal .75em/24px var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    text-align: center;
    margin-left: 200px;
    margin-right: 200px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: auto;
    height: 22px !important;
    cursor: pointer;
    display: block;
}
.v-chapter-nav-doc-title.in-start {
    margin-left: 15px;
    font-weight: var(--v-f-w-title);
    font-size: 1.25em;
    line-height: 50px;
    text-align: left;
    height: 50px !important;
    cursor: default;
}

.v-chapter-nav-current {
    font: var(--v-f-w-title) 1em/22px var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    text-align: center;
    margin-left: 200px;
    margin-right: 200px;
    padding-top: 2px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: auto;
    height: 28px;
    cursor: pointer;
    display: block;
}
.v-chapter-nav-current>span {
    opacity: .75;
}
.v-chapter-nav-doc-title.effect.hover,
.v-chapter-nav-current.effect.hover {
    color: @buttonForeHoverColor;
}

// 无特效（effect=0）时使用的样式
.v-chapter-nav-doc-title.noeffect.hover,
.v-chapter-nav-current.noeffect.hover {
    background: linear-gradient(90deg, fade(@aHoverColor, 0%), @aHoverColor, fade(@aHoverColor, 0%));
    height: 28px;
    color: @buttonForeHoverColor;
}

// 有特效（effect>=1）时使用的样式
.v-chapter-nav-doc-title.effect::before,
.v-chapter-nav-current.effect::before {
    content: attr(d-header-num);
    position: absolute;
    top: 22px;
    bottom: 0;
    left: 30%;
    right: 30%;
    height: 28px;
    background: linear-gradient(90deg, fade(@aHoverColor, 0%), @aHoverColor, fade(@aHoverColor, 0%));
    opacity: 0;
    z-index: -1;
}
.v-chapter-nav-doc-title.effect::before {
    top: 0;
    height: 22px;
}

// 有特效（effect>=1）时使用的样式
.v-chapter-nav-doc-title.effect.hover::before,
.v-chapter-nav-current.effect.hover::before {
    opacity: 1;
}
// 无特效（effect=0）时，有特效（effect>=1）时使用的样式
.v-chapter-nav-doc-title.noeffect:active,
.v-chapter-nav-doc-title.effect:active,
.v-chapter-nav-doc-title.effect:active::before,
.v-chapter-nav-current.noeffect:active,
.v-chapter-nav-current.effect:active,
.v-chapter-nav-current.effect:active::before {
    background: linear-gradient(90deg, fade(desaturate(@aHoverColor, 30%), 0%), desaturate(@aHoverColor, 30%), fade(desaturate(@aHoverColor, 30%), 0%));
    box-shadow: none;
}

.v-chapter-nav-next {
    top: 0;
    right: 0;
    width: 20%;
    height: 50px;
    position: absolute;
    cursor: pointer;
    border-bottom-right-radius: var(--v-r-b);
}
// 无特效（effect=0）时使用的样式
.v-chapter-nav-next.noeffect.hover {
    background: linear-gradient(to left, @aHoverColor, @buttonBgColor);
    border-bottom-right-radius: var(--v-r-b);
}
.v-chapter-nav-next.effect.hover>svg>use,
.v-chapter-nav-next.noeffect.hover>svg>use {
    fill: @buttonForeHoverColor;
}
.v-chapter-nav-next.noeffect.hover>.v-chapter-nav-next-text,
.v-chapter-nav-next.effect.hover>.v-chapter-nav-next-text {
    color: @buttonForeHoverColor;
}
// 有特效（effect>=1）时使用的样式
.v-chapter-nav-next.effect::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(to left, @aHoverColor, @buttonBgColor);
    border-bottom-right-radius: var(--v-r-b);
    opacity: 0;
    z-index: -1;
}
// 有特效（effect>=1）时使用的样式
.v-chapter-nav-next.effect.hover::before {
    opacity: 1;
}
// 无特效（effect=0）时，有特效（effect>=1）时使用的样式
.v-chapter-nav-next.noeffect:active,
.v-chapter-nav-next.effect:active,
.v-chapter-nav-next.effect:active::before {
    background: linear-gradient(to left, desaturate(@aHoverColor, 30%), @buttonBgColor);
}

.v-chapter-nav-next-text {
    top: 0;
    right: 40px;
    width: 100%;
    height: 50px;
    font: normal 1em/50px var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    color: @buttonForeColor;
    text-align: right;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
    display: block;
}

.v-btn.color-scheme {
    margin-left: var(--v-toolbar-btn-space);
    float: right;
}

.v-btn.font-theme {
    margin-left: var(--v-toolbar-btn-space);
    float: right;
}

.v-btn-group.prs {
    margin: 0;
    height: 30px;
    float: right;
    border-radius: var(--v-r-s);
    margin-left: var(--v-toolbar-btn-space);
}

.v-btn-group.hover {
    background: darken(@buttonBgColor, 6%);
    box-shadow: @contrastBorder;
}

// 辅助类按钮
.v-accent-btn {
    width: 40px;
    height: 30px;
    position: absolute;
    text-align: center;
    border-radius: var(--v-r-s);
    box-shadow: var(--v-float-inn-shadow);
    cursor: pointer;
}

.v-accent-btn>svg>use {
    fill: @buttonBgColor;
}

.v-accent-btn.hover {
    background: var(--pn-c-alt);
}

.v-accent-btn:active {
    color: var(--d-bc);
    background: var(--pn-c-alt);
    box-shadow: 0 0 0 2px var(--tbl-bd);
}
.v-accent-btn:active>svg>use {
    fill: var(--d-bc);
}

.v-accent-btn+.v-textfield {
  margin: 0 10px 0 0;
}

.v-accent-btn.figure-nav.disabled {
    cursor:not-allowed;
}
.v-accent-btn.figure-nav.disabled>svg>use {
    fill: var(--pn-c-alt);
}

.v-serch-by-keyword {
    display: block;
    margin: 10px;
}

.v-focus-serch.actived {
    filter: grayscale(50%) opacity(.5) !important;
}

// 输入框
.v-textfield {
    background: var(--d-bc);
    border-radius: var(--v-r-s);
    box-shadow: var(--v-float-inn-shadow);
    margin: 0;
    height: 30px;
}
// 注意 box-shadow 如有多段，且使用动画变换样式
// 须保持内、外阴影样式设置的顺序要一致，否则动画变换会失效
.v-textfield-focus,
.v-textfield.hover-action {
    box-shadow: var(--v-input-focus-inn-shadow), var(--v-input-focus-shadow);
}

// body.typora-export input::placeholder,
// body.typora-export input:focus::placeholder {
body.typora-export :is(input::placeholder, input:focus::placeholder) {
    color: var(--d-f-c-alt);
    font-weight: normal;
}

// 输入框内的输入控件
.v-textfield>input {
    padding: 0;
    margin: 1px 0 0 10px;
    height: 28px;
    color: @aHoverColor;
    background: var(--d-bc);
    border: none;
    float: left;
    outline: 0 solid transparent;
    caret-color: @aHoverColor;
}
.v-textfield>input::input-placeholder,
.v-textfield>input::-webkit-input-placeholder,
.v-textfield>input::-moz-placeholder,
.v-textfield>input:-moz-placeholder {
    color: var(--d-f-c-alt) !important;
}
.v-textfield>input.set-icon {
    margin-left: 0;
}

.v-textfield-icon {
    width: 30px;
    height: 30px;
    padding: 7px;
    text-align: center;
    float: left;
}

// 输入框内的动作按钮
.v-textfield-action {
    width: 40px;
    height: 30px;
    text-align: center;
    border-radius: 0 var(--v-r-s) var(--v-r-s) 0;
    box-shadow: 1px 0 0 0 var(--pn-c-alt) inset;
    float: right;
}
.v-textfield-action.enabled {
    background: @buttonBgColor;
    box-shadow: none;
}
.v-textfield-action.enabled>svg>use {
  fill: @buttonForeColor;
  opacity: 1;
}
.v-textfield-action.hover {
    background: @aHoverColor;
    cursor: pointer;
}
.v-textfield-action.hover>svg>use {
    fill: @buttonForeHoverColor;
}
.v-textfield-action.hover:active {
    background: @aActiveColor;
}

.v-textfield-reset {
    width: 30px;
    height: 30px;
    padding: 7px;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    text-align: center;
    float: right;
    display: none;
    cursor: pointer;
}
.v-textfield-reset:hover>svg>use {
    opacity: .4;
}
.v-textfield-reset:active>svg>use {
    opacity: .6;
}

// tab 栏内按钮
.v-accent-btn.figure-nav {
    display: inline-block;
    margin: 0 10px 10px 10px;
}

.v-toc-filter-result,
.v-toc-history-result {
    display: none;
    width: 100%;
    height: 100%;
    padding: 30px 0 10px 0;
    overflow-y: scroll;
}
.v-toc-history-result {
    padding-top: 60px;
}

.v-toc-history-none,
.v-toc-filter-result-none {
    display: block;
    padding: 0 10px;
    text-align: center;
    color: var(--d-f-c-alt);
    font: normal 1em/3 var(--v-f-fm-text); // [style] [weight] [size/[line-height]] [family]
}

.v-toc-history-title {
    text-align: center;
    position: absolute;
    border-radius: var(--v-r-s);
    left: 10px;
    right: 10px;
    display: inline-block;
    padding-left: 10px;
    padding-right: 10px;
    white-space: nowrap;
    font-family: var(--v-f-fm-subtitle);
    color: var(--d-f-c-alt);
}

.v-btn.nav-center {
    float: left;
}

.v-btn.print {
    margin-left: var(--v-toolbar-btn-space);
    float: left;
}

.v-fig-nav {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse, rgba(0, 0, 0, .5), rgba(0, 0, 0, .9));
    position: fixed;
    visibility: hidden;
    opacity: 0;
    user-select: none;
    z-index: 2200;
}

// 插图导航中的导航按钮
.v-fig-nav-btns {
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    color: @buttonForeColor;
    cursor: pointer;
    padding: 0;
}
// 插图导航中的上一插图按钮
.v-fig-nav-btns.prev {
    left: 10px;
    top: auto;
    width: 30px;
    height: 70px;
    box-shadow: @contrastBorder;
    border-radius: var(--v-r-b);
    position: absolute;
    bottom: 10px;
}
// 插图导航中的下一插图按钮
.v-fig-nav-btns.next {
    right: 10px;
    top: auto;
    width: 30px;
    height: 70px;
    box-shadow: @contrastBorder;
    border-radius: var(--v-r-b);
    position: absolute;
    bottom: 10px;
}

.v-btn-close-figure-nav {
    display: flex;
    justify-content: flex-end;
    vertical-align: middle;
    align-items: normal;
    color: #FFFFFF;
    cursor: pointer;
    background: @buttonBgColor;
    right: -2px;
    top: -2px;
    width: 50px;
    height: 50px;
    padding: 12px 12px 8px 8px;
    box-shadow: @contrastBorder;
    border-radius: 0 0 0 50px;
    position: absolute;
}

.v-btn-close-figure-nav:hover {
    background: @aHoverColor;
    box-shadow: var(--v-float-shadow);
    transform: translate(-2px, 2px) ;
}

.v-btn-close-figure-nav:active {
    background: @aActiveColor;
    box-shadow: 0 0 0 2px fade(@aActiveColor, 50%) !important;
    box-shadow: none;
    transform: none;
}

.v-content-assistor {
    visibility: hidden;
    opacity: 1;
    position: absolute;
    border-radius: var(--v-r-si);
    height: 26px;
    z-index: 50;
}

// .v-content-assistor-target {
//     border-color: @buttonBgColor !important;
// }

.v-btn.assistor {
    top: 0;
    width: 30px;
    height: 26px;
    border-radius: 0;
    background: @buttonBgColor;
    position: relative;
    display: none;
}
.v-btn.assistor.enabled {
    display: inline-flex;
}

.v-pic-in-pic {
    display: none;
    position: fixed;
    background: var(--h-f);
    border-radius: calc(var(--v-r-b) + var(--v-r-b) - var(--v-r-t));
    right: 20px;
    bottom: 10px;
    padding: 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .3);
    z-index: 500;
}
.v-pic-in-pic>.v-content {
    overflow: auto;
    height: 100%;
    border-radius: calc(var(--v-r-b) - 2px);
}
// .v-pic-in-pic>.v-content>table,
// .v-pic-in-pic>.v-content>.v-fig {
.v-pic-in-pic>.v-content>:is(table, .v-fig) {
    border-radius: calc(var(--v-r-b) - 2px) !important;
}
// .v-pic-in-pic>.v-content>table th,
// .v-pic-in-pic>.v-content>table td {
.v-pic-in-pic>.v-content>table :is(th, td) {
    white-space: pre !important;
}

.v-pip-btn {
    position: absolute;
    display: inline-flex;
    visibility: hidden;
    opacity: 0;
    background: var(--d-bc);
    border-radius: 50%;
    top: 8px;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    cursor: pointer;
    z-index: 20;
}
.v-pip-btn.min.zoom-in {
    top: 6px;
}
.v-pip-btn.min.zoom-out {
    top: 3px;
}

.v-pip-btn.v-close {
    right: 8px;
}

.v-pip-btn.v-zoom.zoom-in {
    right: 32px;
}
.v-pip-btn.v-zoom.zoom-out {
    right: 38px;
}

.v-pip-btn.zoom-in {
    width: 20px;
    height: 20px;
}
.v-pip-btn.zoom-out {
    width: 26px;
    height: 26px;
}

.v-pip-btn.zoom-in>svg {
    transform: scale(1);
}
.v-pip-btn.zoom-out>svg {
    transform: scale(1.33);
}
.v-pip-btn:hover>svg>use {
    fill: @aHoverColor;
}
.v-pip-btn:active>svg>use {
    fill: @aActiveColor;
}

// 文档抽屉面板
.v-doc-lib-board {
    display: none;
    left: 10px;
    right: 10px;
    bottom: 10px;
    height: 50px;
    position: absolute;
    z-index: 20;
}

// 文档抽屉面板下的按钮
.v-doc-lib-board>.item {
    border-radius: var(--v-r-s);
    color: @docLibButtonForeColor;
    background: @docLibButtonBgColor;
    background-image: url("");
    background-position: top center;
    background-repeat: no-repeat;
    font: var(--v-f-w-bd) 1.25em/@defaultLineHeight var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding: 12px 10px 0px;
    position: absolute;
    display: block;
    width: 100%;
    height: 50px;
    cursor: pointer;
    z-index: 23;
}
// 文档抽屉面板下的文档条
.v-doc-lib-board>.flip {
    left: 70px;
    right: 70px;
    bottom: 58px;
    height: 4px;
    position: absolute;
    background-color: @docLibButtonBgColor;//var(--d-f-c);
    opacity: .15;
    border-radius: calc(var(--v-r-s) - 4px) calc(var(--v-r-s) - 4px) 0 0;
    z-index: 21;
}
.v-doc-lib-board>.flip+.flip {
    left: 40px;
    right: 40px;
    bottom: 51px;
    height: 6px;
    background-color: @docLibButtonBgColor;//var(--d-f-c);
    opacity: .3;
    border-radius: calc(var(--v-r-s) - 2px) calc(var(--v-r-s) - 2px) 0 0;
    z-index: 22;
}
// hover
.v-doc-lib-board>.item.hover {
    background-color: @aHoverColor;
    color: @docLibButtonForeHoverColor;
}
.v-doc-lib-board>.item.hover+.flip {
    left: 40px;
    right: 40px;
    bottom: 64px;
    height: 9px;
    background-color: @aHoverColor;
    opacity: .2;
    border-radius: calc(var(--v-r-s) - 2px) calc(var(--v-r-s) - 2px) 0 0;
}
.v-doc-lib-board>.item.hover+.flip+.flip {
    left: 20px;
    right: 20px;
    bottom: 51px;
    height: 12px;
    background-color: @aHoverColor;
    opacity: .4;
    border-radius: calc(var(--v-r-s) - 1px) calc(var(--v-r-s) - 1px) 0 0;
}
// active
.v-doc-lib-board>.item:active {
    background: @aActiveColor !important;
    box-shadow: 0 0 0 2px fade(@aActiveColor, 50%) !important;
}

// 文档抽屉
.v-doc-lib {
    display: none;
    background: var(--d-bc);
    box-shadow: 0 0 0 2px var(--tbl-bd);
    margin: 0;
    border: none;
    border-radius: 0 0 var(--v-r-b) var(--v-r-b);
    overflow: auto;
    position: fixed;
    left: 10%;
    top: 0;
    right: 10%;
    bottom: 10%;
    z-index: 5000;
}
.v-doc-lib>iframe {
    width: 100%;
    height: 100%;
    border: none;
    overflow: auto;
}

.v-interactive {
    cursor: pointer;
}
.v-interactive.hover {
    border-color: @aHoverColor !important;
}
.v-interactive.hover:active {
    box-shadow: 0 0 0 2px fade(@aHoverColor, 50%);
}
.v-interactive.hover:active {
    border-color: @aActiveColor !important;
    box-shadow: none;
    transform: none;
}

// 指定在 Dark Mode 时反转的图片样式
.v-img-invert-dark {
    background-color: #FFFFFF !important;
    filter: var(--v-invert-dk);
    border-color: var(--img-bd-invert) !important;
}

// Light 模式的插图网格背景
.v-fig-solid-bg-light {
    background: @figureSolidBgLight;
}
.v-fig-grid-line-light {
    background: var(--v-fig-grid-l-lg) !important;
}
.v-fig-grid-block-light {
    background: var(--v-fig-grid-b-lg) !important;
}

// Dark Mode 的插图网格背景
.v-fig-solid-bg-dark {
    background-color: @figureSolidBgDark;
}
.v-fig-grid-line-dark {
    background: var(--v-fig-grid-l-dk) !important;
}
.v-fig-grid-line-dark-invert {
    background: var(--v-fig-grid-l-invert) !important;
}
.v-fig-grid-block-dark {
    background: var(--v-fig-grid-b-dk) !important;
}
.v-fig-grid-block-dark-invert {
    background: var(--v-fig-grid-b-invert) !important;
}

.v-fig-content {
    margin: 5px;
    padding: 5px;
    display: table-cell;
    align-content: center;
    text-align: center;
    vertical-align: middle;
    width: 100%;
    color: var(--d-f-c);
}

.v-fig-nav-title {
    color: #C0C4C8 !important;
    left: 10px;
    top: 10px;
    position: absolute;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.v-fig-page-num {
    border-radius: var(--v-r-s);
    color: #FFFFFF;
    background: var(--d-f-c-alt);
    padding-left: 4px;
    padding-right: 4px;
    font: normal .875em var(--v-f-fm-bd); // [style] [weight] [size/[line-height]] [family]
}

.v-caption {
    display: inline-block;
    border-radius: var(--v-r-b);
    background: @captionBackground;
}

.v-cap-1,
.v-cap-2 {
    color: @captionTextColor;
    font: normal .875em var(--v-f-fm-tag); // [style] [weight] [size/[line-height]] [family]
    font-weight: normal;
    margin: 5px 10px !important;
    width: auto !important;
}

.v-cap-cntr {
    border-radius: var(--v-r-b);
    margin-bottom: @scrollFix !important;
}

// 用于折叠类、表格列格式复选框的小图标
.v-svg-small-ico {
    display: inline-block;
}
.v-svg-small-ico[data-chk="no"] {
    opacity: .25;
}

use.v-svg-ico-light {
    fill: @buttonForeColor;
}

use.v-svg-ico-dark {
    fill: var(--d-f-c);
}

use.v-svg-ico-alpha {
    fill: var(--d-f-c);
    opacity: .2;
}

use.v-svg-ico-theme {
    fill: var(--h-f);
}

use.v-svg-ico-alt {
    fill: var(--d-f-c-alt);
}

// 折叠按钮样式
use.v-toc-folder-ico,
use.v-rowgroup-folder-ico,
use.v-blockquote-folder-ico {
    fill: var(--h-f);
}

use.v-blockquote-folder-ico:active {
    fill: @aActiveColor;
}

// 遮罩样式
.v-mask {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    position: fixed;
    background: rgba(0, 0, 0, .6);
    display: none;
    z-index: 1000;
}
// 遮罩扩展样式
.v-mask.left {
    background: linear-gradient(90deg, @themeBgColorDark 20%, fade(@themeBgColorDark, 50%));
}
.v-mask.right {
    background: linear-gradient(270deg, @themeBgColorDark 20%, fade(@themeBgColorDark, 50%));
}
.v-mask.bottom {
    background: linear-gradient(0deg, @themeBgColorDark 20%, fade(@themeBgColorDark, 50%));
}
.v-mask.center {
    background: radial-gradient(ellipse, @themeBgColorDark 10%, fade(@themeBgColorDark, 50%));
}

// 遮罩关闭提示器样式
.v-mask-close {
    position: fixed;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    width: 60px;
    height: 60px;
    opacity: .7;
}
// 遮罩关闭提示器扩展样式
.v-mask-close.left {
    width: 16px;
    height: 60px;
}
.v-mask-close.right {
    width: 16px;
    height: 60px;
}
.v-mask-close.bottom {
    width: 60px;
    height: 16px;
}

.v-backdrop-blurs.enabled {
    backdrop-filter: saturate(180%) blur(15px);
    -webkit-backdrop-filter: saturate(180%) blur(15px);
}

// #write blockquote>p:first-of-type:has(:is(span[md-inline="image"], img))+blockquote {
//     color:  var(--d-f-c-dk);
//     border-radius: 0 0 var(--v-r-b) var(--v-r-b);
//     border: none;
//     background: var(--ac-t1);//fade(@accColorGray, 20%);
// }
// #write blockquote>p:first-of-type:has(:is(span[md-inline="image"], img))+blockquote::before {
//     content: "Pic Card";
//     color: var(--d-f-c);
//     font-weight: bold;
//     font-style: italic;
//     font-size: .5em;
//     opacity: .5;
//     background: var(--pn-c-alt);
//     border-radius: var(--v-r-b);
//     padding: 0 5px;
// }

// 引用内的分栏引用
// #write blockquote>hr+blockquote,
// #write blockquote>hr+blockquote+blockquote,
// #write blockquote>hr+blockquote+blockquote,
// #write blockquote>hr+blockquote+blockquote+blockquote,
// #write blockquote>hr+blockquote+blockquote+blockquote+blockquote,
// #write blockquote>.md-hr+blockquote,
// #write blockquote>.md-hr+blockquote+blockquote,
// #write blockquote>.md-hr+blockquote+blockquote+blockquote,
// #write blockquote>.md-hr+blockquote+blockquote+blockquote+blockquote {
// #write blockquote>:is(hr, .md-hr)+blockquote,
// #write blockquote>:is(hr, .md-hr)+blockquote+blockquote,
// #write blockquote>:is(hr, .md-hr)+blockquote+blockquote+blockquote,
// #write blockquote>:is(hr, .md-hr)+blockquote+blockquote+blockquote+blockquote,
#write :is(blockquote, details)>:is(hr, .md-hr)+details,
#write :is(blockquote, details)>:is(hr, .md-hr)+details+details,
#write :is(blockquote, details)>:is(hr, .md-hr)+details+details+details,
#write :is(blockquote, details)>:is(hr, .md-hr)+details+details+details+details {
    border: none;
    background: var(--d-bc) !important;
    border-radius: var(--v-r-s);
    padding: .75em 1em;
    margin-top: .625em;
    margin-bottom: .625em;
}

// 彩虹引用
:is(#write, body.typora-export) .v-q {
    color: var(--d-f-c);
    width: auto;
    border: none;
    border-radius: var(--v-r-b);
    padding: .75em 1em;
    margin-top: 10px;
    margin-bottom: 5px;
}
// 生成彩虹引用相关样式
.genRainbowQuoteCSS(@quoteMark, @accColor, @fadeColor, @btnBg, @btnFore, @titleColor, @titleLightColor) {
    #write .v-q.@{quoteMark} {
        box-shadow: 0 0 0 4px @fadeColor inset;
        background: none;
    }
    // 强调样式
    #write .v-q.@{quoteMark}.em {
        box-shadow: none;
        background: @fadeColor !important;
    }
    // 代码
    // #write .v-q.@{quoteMark} .v-std-code,
    // #write .v-q .v-q.@{quoteMark} .v-std-code {
    //     background: var(~'--ac-@{quoteMark}');
    //     // background: var(~'--');
    //     color: var(~'--ac-@{quoteMark}-title');//var(--d-f-c);
    // }
    // #write .v-q.@{quoteMark}.em .v-std-code,
    // #write .v-q .v-q.@{quoteMark}.em .v-std-code {
    //     background: var(--d-bc);
    //     color: var(~'--ac-@{quoteMark}-lg');//var(--d-f-c);
    // }
    // 高亮
    #write .v-q.@{quoteMark} mark,
    #write .v-q .v-q.@{quoteMark} mark {
        box-shadow: 0 -.9em 0 0 @fadeColor inset;
    }
    #write .v-q.@{quoteMark}.em mark,
    #write .v-q .v-q.@{quoteMark}.em mark {
        box-shadow: 0 -.9em 0 0 var(--d-bc) inset;
    }
    // 折叠控件
    .v-q.@{quoteMark} .v-blockquote-folder>svg>use,
    .v-q.@{quoteMark} .v-svg-input-checkbox>use {
        fill: @btnBg;
    }
    .v-q.@{quoteMark} summary::before {
        color: @btnFore;
        background-color: @btnBg;
    }
    // 折叠控件展开样式
    #write .v-q[open].@{quoteMark}.em summary,
    #write .v-q.@{quoteMark}.em details[open] summary {
        border-color: var(--d-bc);
        // border-color: var(--pn-c);
    }
    #write .v-q[open].@{quoteMark} summary,
    #write .v-q.@{quoteMark} details[open] summary {
        border-color: @fadeColor;
    }
    #write .v-q[open].@{quoteMark}>summary::before,
    #write .v-q.@{quoteMark} details[open]>summary::before {
        // color: @btnBg !important;
        background: none !important;
        // box-shadow: 0 0 0 1px inset @btnBg;
        opacity: .5;
    }
    // 按钮链接
    #write .v-q.@{quoteMark} a kbd,
    #write .v-q .v-q.@{quoteMark} a kbd {
        background: @btnBg;
        color: @btnFore;
        box-shadow: 0 3px darken(@btnBg, 15%); // 按钮高 3px
    }
    #write .v-q.@{quoteMark} a kbd:hover,
    #write .v-q .v-q.@{quoteMark} a kbd:hover {
        color: @buttonForeHoverColor;
        background: @aHoverColor;
        box-shadow: 0 3px darken(@aHoverColor, 15%); // 按钮高 3px
    }
    // 图文卡片
    #write .v-q.@{quoteMark} .v-post-card {
        color: @btnFore !important;
        // background: linear-gradient(180deg, @btnBg 50%, rgba(@btnBg, .9));
        background: @btnBg !important;
        // text-shadow: 0 1px darken(@btnFore, 75%) !important;
    }
    #write .v-q.@{quoteMark} img[src*="#card"],
    #write .v-q.@{quoteMark} svg[data-inject-url*="#card"] {
        border-color: @btnBg !important;
    }
    #write .v-q.@{quoteMark} .v-post-card a kbd,
    #write .v-q .v-q.@{quoteMark} .v-post-card a kbd {
        border: 1px solid fade(@buttonForeColor, 25%);
    }
    // 链接
    #write .v-q.@{quoteMark} a,
    #write .v-q .v-q.@{quoteMark} a {
        color: @btnBg !important;
    }
    #write .v-q.@{quoteMark} a:hover,
    #write .v-q .v-q.@{quoteMark} a:hover {
        color: var(--d-f-c) !important;
        box-shadow: 0 -.3em 0 0 rgba(@accColor, .3) inset;
    }
    #write .v-q.@{quoteMark} a:active,
    #write .v-q .v-q.@{quoteMark} a:active {
        background: var(--pn-c);
        border-bottom: 0;
        border-radius: var(--v-r-s);
        // box-shadow: 0 0 0 2px rgba(@accColor, .3);
    }
    // #write .v-q.@{quoteMark} a:active:has(kbd) {
    //     box-shadow: none;
    // }
    // 标题
    #write .v-q>.title-@{quoteMark},
    #write .v-q .v-q>.title-@{quoteMark} {
        color: @titleLightColor;
    }
    // 强调标题
    #write .v-q>.title-@{quoteMark}.em,
    #write .v-q .v-q>.title-@{quoteMark}.em {
        color: @titleColor;
    }
    // 列表符号
    #write .v-q.@{quoteMark} ::marker,
    #write .v-q.@{quoteMark} li::before {
        color: @accColor;
    }
    // 代码行号
    #write .v-q.@{quoteMark} .CodeMirror-linenumber {
        color: @accColor;
    }
}
.genRainbowQuoteCSS(rd, @accColorRed, var(--ac-rd-fade), @accColorRed, #FFFFFF, var(--ac-rd-title), var(--ac-rd-title-lg));
.genRainbowQuoteCSS(og, @accColorOrange, var(--ac-og-fade), @accColorOrange, #FFFFFF, var(--ac-og-title), var(--ac-og-title-lg));
.genRainbowQuoteCSS(ye, @accColorYellow, var(--ac-ye-fade), @accColorYellow, #000000, var(--ac-ye-title), var(--ac-ye-title-lg));
.genRainbowQuoteCSS(lm, @accColorLime, var(--ac-lm-fade), @accColorLime, #000000, var(--ac-lm-title), var(--ac-lm-title-lg));
.genRainbowQuoteCSS(gn, @accColorGreen, var(--ac-gn-fade), @accColorGreen, #FFFFFF, var(--ac-gn-title), var(--ac-gn-title-lg));
.genRainbowQuoteCSS(mn, @accColorMineral, var(--ac-mn-fade), @accColorMineral, #FFFFFF, var(--ac-mn-title), var(--ac-mn-title-lg));
.genRainbowQuoteCSS(ol, @accColorOlives, var(--ac-ol-fade), @accColorOlives, #FFFFFF, var(--ac-ol-title), var(--ac-ol-title-lg));
.genRainbowQuoteCSS(wn, @accColorWine, var(--ac-wn-fade), @accColorWine, #FFFFFF, var(--ac-wn-title), var(--ac-wn-title-lg));
.genRainbowQuoteCSS(aq, @accColorAqua, var(--ac-aq-fade), @accColorAqua, #000000, var(--ac-aq-title), var(--ac-aq-title-lg));
.genRainbowQuoteCSS(cy, @accColorCyan, var(--ac-cy-fade), @accColorCyan, #FFFFFF, var(--ac-cy-title), var(--ac-cy-title-lg));
.genRainbowQuoteCSS(bu, @accColorBlue, var(--ac-bu-fade), @accColorBlue, #FFFFFF, var(--ac-bu-title), var(--ac-bu-title-lg));
.genRainbowQuoteCSS(se, @accColorSea, var(--ac-se-fade), @accColorSea, #FFFFFF, var(--ac-se-title), var(--ac-se-title-lg));
.genRainbowQuoteCSS(la, @accColorLavender, var(--ac-la-fade), @accColorLavender, #000000, var(--ac-la-title), var(--ac-la-title-lg));
.genRainbowQuoteCSS(vn, @accColorVine, var(--ac-vn-fade), @accColorVine, #FFFFFF, var(--ac-vn-title), var(--ac-vn-title-lg));
.genRainbowQuoteCSS(pu, @accColorPurple, var(--ac-pu-fade), @accColorPurple, #FFFFFF, var(--ac-pu-title), var(--ac-pu-title-lg));
.genRainbowQuoteCSS(ro, @accColorRose, var(--ac-ro-fade), @accColorRose, #FFFFFF, var(--ac-ro-title), var(--ac-ro-title-lg));
.genRainbowQuoteCSS(pk, @accColorPink, var(--ac-pk-fade), @accColorPink, #000000, var(--ac-pk-title), var(--ac-pk-title-lg));
.genRainbowQuoteCSS(gd, @accColorGold, var(--ac-gd-fade), @accColorGold, #000000, var(--ac-gd-title), var(--ac-gd-title-lg));
.genRainbowQuoteCSS(bn, @accColorBrown, var(--ac-bn-fade), @accColorBrown, #FFFFFF, var(--ac-bn-title), var(--ac-bn-title-lg));
.genRainbowQuoteCSS(gy, @accColorGray, var(--ac-gy-fade), @accColorGray, #FFFFFF, var(--ac-gy-title), var(--ac-gy-title-lg));
.genRainbowQuoteCSS(t1, @theme1, var(--ac-t1-fade), @docLibButtonBgColor, @docLibButtonForeColor, var(--ac-t1-title), var(--ac-t1-title-lg));
.genRainbowQuoteCSS(t2, @theme2, var(--ac-t2-fade), @aHoverColor, @buttonForeHoverColor, var(--ac-t2-title), var(--ac-t2-title-lg));

// 标签式公用样式（风格2）
// .v-tag {
// #write .v-tag,
// body.typora-export .v-tag {
// 编辑时标签样式
#write em>span>.md-before+code,
:is(#write, body.typora-export) .v-tag {
    font: var(--v-f-w-bd) .75em var(--v-f-fm-tag); // [style] [weight] [size/[line-height]] [family]
    // background: transparent;
    // border-radius: 1em;
    border-radius: var(--v-r-tag);//calc(var(--v-r-tag) + 2px);
    // padding: 2px 5px;
    // padding: 2px 4px;
    text-shadow: none;
    white-space: pre;
    line-height: 1;
    vertical-align: text-top;
    cursor: var(--cur-copy);
}
:is(#write, body.typora-export) .v-tag.em {
    box-shadow: 0 0 0 1px var(--rb-code-shadow) inset;
}
.v-tag.hover {
    filter: brightness(@hoverBrightness);
}

// 生成彩虹标签相关样式
.genRainbowTagCSS(@tagMark, @tagColor, @tagBdColor, @tagColorEm, @tagText) {
    .v-tag.@{tagMark} {
        color: @tagColor !important;
        box-shadow: 0 0 0 1px @tagColorEm inset;
        background: @tagBdColor !important;
    }
    .v-tag.@{tagMark}.em {
        color: @tagText !important;
        background: @tagColorEm !important;
    }
}
.genRainbowTagCSS(wn, var(--ac-wn), var(--ac-wn-alt), var(--ac-wn), var(--d-f-c-dk));
.genRainbowTagCSS(rd, var(--ac-rd), var(--ac-rd-alt), var(--ac-rd), var(--d-f-c-dk));
.genRainbowTagCSS(og, var(--ac-og), var(--ac-og-alt), var(--ac-og), var(--d-f-c-dk));
.genRainbowTagCSS(ye, var(--ac-ye-title-lg), var(--ac-ye-alt), var(--ac-ye), var(--d-f-c-lg));
.genRainbowTagCSS(lm, var(--ac-lm-title-lg), var(--ac-lm-alt), var(--ac-lm), var(--d-f-c-lg));
.genRainbowTagCSS(gn, var(--ac-gn), var(--ac-gn-alt), var(--ac-gn), var(--d-f-c-dk));
.genRainbowTagCSS(mn, var(--ac-mn), var(--ac-mn-alt), var(--ac-mn), var(--d-f-c-dk));
.genRainbowTagCSS(ol, var(--ac-ol), var(--ac-ol-alt), var(--ac-ol), var(--d-f-c-dk));
.genRainbowTagCSS(wn, var(--ac-wn), var(--ac-wn-alt), var(--ac-wn), var(--d-f-c-dk));
.genRainbowTagCSS(aq, var(--ac-aq-title-lg), var(--ac-aq-alt), var(--ac-aq), var(--d-f-c-lg));
.genRainbowTagCSS(cy, var(--ac-cy), var(--ac-cy-alt), var(--ac-cy), var(--d-f-c-dk));
.genRainbowTagCSS(bu, var(--ac-bu), var(--ac-bu-alt), var(--ac-bu), var(--d-f-c-dk));
.genRainbowTagCSS(se, var(--ac-se), var(--ac-se-alt), var(--ac-se), var(--d-f-c-dk));
.genRainbowTagCSS(la, var(--ac-la-title-lg), var(--ac-la-alt), var(--ac-la), var(--d-f-c-lg));
.genRainbowTagCSS(vn, var(--ac-vn), var(--ac-vn-alt), var(--ac-vn), var(--d-f-c-dk));
.genRainbowTagCSS(pu, var(--ac-pu), var(--ac-pu-alt), var(--ac-pu), var(--d-f-c-dk));
.genRainbowTagCSS(ro, var(--ac-ro), var(--ac-ro-alt), var(--ac-ro), var(--d-f-c-dk));
.genRainbowTagCSS(pk, var(--ac-pk-title-lg), var(--ac-pk-alt), var(--ac-pk), var(--d-f-c-lg));
.genRainbowTagCSS(gd, var(--ac-gd-title-lg), var(--ac-gd-alt), var(--ac-gd), var(--d-f-c-lg));
.genRainbowTagCSS(bn, var(--ac-bn), var(--ac-bn-alt), var(--ac-bn), var(--d-f-c-dk));
.genRainbowTagCSS(gy, var(--ac-gy), var(--ac-gy-alt), var(--ac-gy), var(--d-f-c-dk));
.genRainbowTagCSS(bk, var(--ac-bk), var(--ac-bk-alt), var(--ac-bk), var(--d-bc));
// .genRainbowTagCSS(bk, var(--d-f-c), var(--toc-h-num-color), var(--d-f-c), var(--d-bc));
.genRainbowTagCSS(t1, var(--ac-t1), var(--ac-t1-alt), var(--ac-t1), var(--d-f-c-dk));
.genRainbowTagCSS(t2, var(--ac-t2), var(--ac-t2-alt), var(--ac-t2), var(--d-f-c-dk));

// 徽章样式名称公共样式
// .v-badge-name {
// #write .v-badge-name,
// body.typora-export .v-badge-name {
:is(#write, body.typora-export) .v-badge-name {
    display: inline-block;
    // display: inline-flex;
    align-items: center;
    font: var(--v-f-w-bd) .875em var(--v-f-fm-tag); // [style] [weight] [size/[line-height]] [family]
    margin-right: 0;
    border-radius: var(--v-r-tag);
    color: fade(#FFFFFF, 90%);
    padding: 1px 1px 1px 5px;
    white-space: pre;
    line-height: 1;
    vertical-align: top;
    box-shadow: 0 0 0 1px var(--rb-code-shadow) inset;
    cursor: var(--cur-copy);
}
.v-badge-name.hover {
    filter: brightness(@hoverBrightness);
}

// 表格内的情况
// #write table code,
// body.typora-export table code,
:is(#write, body.typora-export) :is(blockquote, details) code {
// table .v-badge-name {
// #write table .v-badge-name,
// body.typora-export table .v-badge-name {
// :is(#write, body.typora-export) table .v-badge-name {
    // display: inline-block;
    // padding: 1px 5px;
    // margin: 1px 0;
    vertical-align: initial;
}
:is(#write, body.typora-export) table {
    // padding: 2px 2px 2px 5px;
    vertical-align: text-top;
}

// 徽章样式内容公共样式
.v-badge-value {
    display: inline-block;
    font: var(--v-f-w-bd) 1em var(--v-f-fm-tag); // [style] [weight] [size/[line-height]] [family]
    border-radius: calc(var(--v-r-tag) - 2px);
    opacity: .9;
    color: var(--d-f-c) !important;
    background: var(--d-bc) !important;
    padding: 0 5px;
    margin: 1px 1px 1px 5px;
    white-space: pre;
    box-shadow: none;
    // cursor: pointer;
    cursor: var(--cur-copy);
}
.v-badge-value.hover {
    filter: brightness(@hoverBrightness);
}

// 表格内的情况
// table .v-badge-value {
// #write table .v-badge-value,
// body.typora-export table .v-badge-value {
:is(#write, body.typora-export) table .v-badge-value {
    display: inline-block;
    margin: 1px 1px 1px 5px;
    // margin: 0 0 0 5px;
}
.v-badge-value>span.var {
    font-style: italic;
}

// 生成彩虹徽章相关样式
// .genRainbowBadgeCSS(@badgeMark, @badgeColor, @badgeVarColor,  @bgColorStyle) when (@bgColorStyle = deep) {
//     .v-badge-name.@{badgeMark} {
//         background: @badgeColor;
//     }
//     :is(.v-badge-value, .v-badge-value>span.var).@{badgeMark} {
//         color: @badgeVarColor !important;
//     }
// }
// .genRainbowBadgeCSS(@badgeMark, @badgeColor, @badgeVarColor,  @bgColorStyle) when (@bgColorStyle = light) {
//     .v-badge-name.@{badgeMark} {
//         color: var(--d-f-c) !important;
//         background: @badgeColor;
//     }
//     :is(.v-badge-value, .v-badge-value>span.var).@{badgeMark} {
//         color: @badgeVarColor !important;
//     }
// }
// .genRainbowBadgeCSS(@badgeMark, @badgeColor, @badgeVarColor,  @bgColorStyle) when (@bgColorStyle = black) {
//     .v-badge-name.@{badgeMark} {
//         color: var(--d-bc) !important;
//         background: @badgeColor;
//     }
//     .v-badge-value.@{badgeMark} {
//         color: var(--d-f-c) !important;
//     }
//     .v-badge-value>span.var.@{badgeMark} {
//         color: @badgeVarColor;
//     }
// }
.genRainbowBadgeCSS(@badgeMark, @badgeColor, @badgeVarColor,  @tagText) {
    .v-badge-name.@{badgeMark} {
        color: @tagText !important;
        background: @badgeColor !important;
    }
    .v-badge-value>span.var.@{badgeMark} {
        color: @badgeVarColor !important;
    }
    :is(.v-badge-value, .v-badge-value>span.var).@{badgeMark} {
        color: @badgeVarColor !important;
    }
}
.genRainbowBadgeCSS(rd, var(--ac-rd), var(--ac-rd-lg), var(--d-f-c-dk));
.genRainbowBadgeCSS(og, var(--ac-og), var(--ac-og-lg), var(--d-f-c-dk));
.genRainbowBadgeCSS(ye, var(--ac-ye), var(--ac-ye-lg), var(--d-f-c-lg));
.genRainbowBadgeCSS(lm, var(--ac-lm), var(--ac-lm-lg), var(--d-f-c-lg));
.genRainbowBadgeCSS(gn, var(--ac-gn), var(--ac-gn-lg), var(--d-f-c-dk));
.genRainbowBadgeCSS(mn, var(--ac-mn), var(--ac-mn-lg), var(--d-f-c-dk));
.genRainbowBadgeCSS(ol, var(--ac-ol), var(--ac-ol-lg), var(--d-f-c-dk));
.genRainbowBadgeCSS(wn, var(--ac-wn), var(--ac-wn-lg), var(--d-f-c-dk));
.genRainbowBadgeCSS(aq, var(--ac-aq), var(--ac-aq-lg), var(--d-f-c-lg));
.genRainbowBadgeCSS(cy, var(--ac-cy), var(--ac-cy-lg), var(--d-f-c-dk));
.genRainbowBadgeCSS(bu, var(--ac-bu), var(--ac-bu-lg), var(--d-f-c-dk));
.genRainbowBadgeCSS(se, var(--ac-se), var(--ac-se-lg), var(--d-f-c-dk));
.genRainbowBadgeCSS(la, var(--ac-la), var(--ac-la-lg), var(--d-f-c-lg));
.genRainbowBadgeCSS(vn, var(--ac-vn), var(--ac-vn-lg), var(--d-f-c-dk));
.genRainbowBadgeCSS(pu, var(--ac-pu), var(--ac-pu-lg), var(--d-f-c-dk));
.genRainbowBadgeCSS(ro, var(--ac-ro), var(--ac-ro-lg), var(--d-f-c-dk));
.genRainbowBadgeCSS(pk, var(--ac-pk), var(--ac-pk-lg), var(--d-f-c-lg));
.genRainbowBadgeCSS(gd, var(--ac-gd), var(--ac-gd-lg), var(--d-f-c-lg));
.genRainbowBadgeCSS(bn, var(--ac-bn), var(--ac-bn-lg), var(--d-f-c-dk));
.genRainbowBadgeCSS(gy, var(--ac-gy), var(--ac-t2-lg), var(--d-f-c-dk));
.genRainbowBadgeCSS(bk, var(--d-f-c), var(--ac-t2-lg), var(--d-bc));
.genRainbowBadgeCSS(t1, var(--ac-t1), var(--ac-t1-lg), var(--d-f-c-dk));
.genRainbowBadgeCSS(t2, var(--ac-t2), var(--ac-t2-lg), var(--d-f-c-dk));

// 注音
rp,
rt {
    font: normal .5em var(--v-f-fm-bd); // [style] [weight] [size/[line-height]] [family]
    opacity: .6;
    padding-left: .5em;
    padding-right: .5em;
}
rt:hover {
    color: @aHoverColor;
    opacity: 1;
    transform-origin: center bottom;
    transform: scale(1.5);
    cursor: pointer;
}

// 黑幕（刮刮卡）
#write .v-rb-coat {
    text-shadow: 0px 1px var(--d-f-c);
    box-shadow: none;
    color: var(--d-bc);
    font: var(--v-f-w-bd) .875em var(--v-f-fm-code); // [style] [weight] [size/[line-height]] [family]
    cursor: pointer;
}
#write .v-rb-coat:hover {
    box-shadow: 0 0 0 1px @aLineColor !important;
    // box-shadow: 0 0 0 1px @aLineColor, 0 -2px 0 0 @aLineColor inset !important;
    display:inline-block;
    transform: scale(1.2);
}
#write .v-rb-coat.opened {
    box-shadow: 0 0 0 1px var(--d-f-c);
    // box-shadow: 0 0 0 1px var(--d-f-c), 0 -2px 0 0 var(--d-f-c) inset;
    background: var(--d-bc) !important;
    text-shadow: none;
}

// 标题内 code 样式
#write :is(h1, h2, h3, h4, h5, h6) code {
    font-size: .75em;
}
// h6 内的 code 标签强制取消加粗
// h6 code {
//     font-weight: var(--v-f-w-text);
// }

// 上标、下标样式
// content>#write blockquote p>sub:only-child,
// content>#write blockquote p>sub:first-of-type,
// #write :is(sup, sub) {
//     color: var(--d-f-c);
//     font-size: .75em;
//     // opacity: .75;
//     // font-weight: normal;
// }

/**************************************
* 封面、封底
**************************************/

// 无标准封面时的封面样式
.v-doc-title {
    color: @headerColor;
    font: var(--v-f-w-title) 2.5em/1.3 var(--v-f-fm-title); // [style] [weight] [size/[line-height]] [family]
    padding-top: 70px;
    opacity: .5;
}
.v-doc-title.mini {
    padding-top: 10px;
}

// 封面：#write 下 H6 作为第一个元素时
#write>pre.md-meta-block:first-child+h6, // 有 YAML 的情况
#write>h6:first-child, // 无 YAML 的情况
// 封底：#write 下 H6 作为最后一个元素时
#write>h1:last-child {
    display: block;
    color: @coverTextColor !important;
    font: var(--v-f-w-title) 2.5em/1.3 var(--v-f-fm-title); // [style] [weight] [size/[line-height]] [family]
    text-align: @coverTextAlign;
    filter: var(--v-brightness-dark);
    height: 950px;//25cm;
    padding: @coverTextPadding;
    margin: 0 0 3em;
    border: none;
    border-radius: var(--v-r-b);
    box-shadow: @contrastBorderForCover;
    background-color: @coverBackgroundColor;
    background-image: @coverBackgroundImage;
    background-size: @coverBackgroundSize;
    background-repeat: @coverBackgroundRepeat;
    background-position: @coverBackgroundPosition;
    letter-spacing: 0;
}
#write>pre.md-meta-block:first-child+h6>span, // 有 YAML 的情况
#write>h6:first-child>span { // 无 YAML 的情况
    color: @coverTextColor !important;
    -webkit-text-stroke: @coverTextStroke;
    text-stroke: @coverTextStroke;
    text-shadow: @coverTextShadow;
}
#write>h1:last-child>span {
    color: @backCoverTextColor !important;
    -webkit-text-stroke: @backCoverTextStroke;
    text-stroke: @backCoverTextStroke;
    text-shadow: @backCoverTextShadow;
}

// 封底样式微调
#write>h1:last-child {
    height: 550px;//14cm;
    margin-top: 3em;
    margin-bottom: 0;
    padding: @backCoverTextPadding;
    color: @backCoverTextColor !important;
    text-align: @backCoverTextAlign;
    background-color: @backCoverBackgroundColor;
    background-image: @backCoverBackgroundImage;
    background-size: @backCoverBackgroundSize;
    background-repeat: @backCoverBackgroundRepeat;
    background-position: @backCoverBackgroundPosition;
    letter-spacing: 0;
}

// 封面内上标格式
#write>pre.md-meta-block:first-child+h6 sup,
#write>h6:first-child sup {
    color: @coverTextColor !important;
}

// 封面内下标格式（大标题上的小标题）
// #write>pre.md-meta-block:first-child+h6 sub,
// #write>h6:first-child sub {
#write>pre.md-meta-block:first-child+h6 sub,
#write>h6:first-child sub {
    color: @coverSubColor;
    -webkit-text-stroke: @coverTextStroke;
    text-stroke: @coverTextStroke;
    text-shadow: @coverTextShadow;
    font: var(--v-f-w-bd) 75% var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
}

// 封面内下划线格式（大标题下的副标题）
#write>pre.md-meta-block:first-child+h6 u,
#write>h6:first-child u {
    color: @coverUnderlineColor;
    font: var(--v-f-w-bd) .75em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    text-decoration: none;
    border: none;
}

#write u>u {
    font-size: .75em;
}

// 封面内密级信息
// #write>pre.md-meta-block:first-child+h6 code,
// #write>pre.md-meta-block:first-child+h6 .v-tag,
// #write>pre.md-meta-block:first-child+h6 .v-badge-name,
// #write>h6:first-child code,
// #write>h6:first-child .v-tag,
// #write>h6:first-child .v-badge-name {
#write>pre.md-meta-block:first-child+h6 :is(code, .v-tag, .v-badge-name),
#write>h6:first-child :is(code, .v-tag, .v-badge-name) {
    font-size: .5em !important;
    color: @buttonForeHoverColor;
    caret-color: @buttonForeHoverColor;
    -webkit-text-stroke: initial;
    text-stroke: initial;
    text-shadow: none;
    vertical-align: initial;
    background: @aHoverColor;
}

// #write>pre.md-meta-block:first-child+h6 .v-badge-value,
// #write>h6:first-child .v-badge-value {
:is(#write>pre.md-meta-block:first-child+h6, #write>h6:first-child) .v-badge-value {
    font-size: 1em !important;
}

// 封面内的作者信息
// #write>pre.md-meta-block:first-child+h6 strong,
// #write>pre.md-meta-block:first-child+h6 strong::before,
// #write>h6:first-child strong,
// #write>h6:first-child strong::before {
:is(#write>pre.md-meta-block:first-child+h6, #write>h6:first-child) :is(strong, strong::before) {
    color: @coverAuthorColor;
    -webkit-text-stroke: initial;
    text-stroke: initial;
    text-shadow: none;
    font: normal .625em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
}

// 作者信息前缀
:is(#write>pre.md-meta-block:first-child+h6, #write>h6:first-child) strong::before {
    content: "by";
    opacity: .6;
    display: block;
    margin-bottom: -.5em;
}

// 封面内的版权信息
#write>pre.md-meta-block:first-child+h6 em,
#write>h6:first-child em {
    color: @coverOwnerColor;
    -webkit-text-stroke: initial;
    text-stroke: initial;
    text-shadow: none;
    font: normal var(--v-f-w-bd) .4em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
}

// 封面、封底的前信息
#write>pre.md-meta-block:first-child+h6::before,
#write>h6:first-child::before,
#write>h1:last-child::before {
    content: "";
}
// 封面装饰文本样式 before
// -- 导出后
body.typora-export #write>pre.md-meta-block:first-child+h6::before,
body.typora-export #write>h6:first-child::before,
body.typora-export #write>pre.md-meta-block:first-child+h6::after,
body.typora-export #write>h6:first-child::after,
// -- 编辑时
#write>pre.md-meta-block:first-child+h6::before,
#write>h6:first-child::before,
#write>pre.md-meta-block:first-child+h6::after,
#write>h6:first-child::after {
    content: @coverTextBeforeContent !important;
    position: @coverTextBeforePosition;
    left: @coverTextBeforeLeft;
    top: @coverTextBeforeTop;
    color: @coverTextBeforeColor;
    font-size: @coverTextBeforeFontSize;
    font-weight: @coverTextBeforeFontWeight;
    opacity: @coverTextBeforeOpacity;
}
// 封面装饰文本样式 after
#write>pre.md-meta-block:first-child+h6::after,
#write>h6:first-child::after {
    content: @coverTextAfterContent !important;
    text-align: @coverTextAfterTextAlign;
    left: @coverTextAfterLeft;
    top: @coverTextAfterTop;
    right: @coverTextAfterRight;
    color: @coverTextAfterColor;
    font-size: @coverTextAfterFontSize;
}

@import "media";
